码迷,mamicode.com
首页 > Web开发 > 详细

css 固定定位

时间:2018-09-21 17:35:46      阅读:415      评论:0      收藏:0      [点我收藏+]

标签:style   浏览器   属性   span   dex   relative   ref   styles   NPU   

一  固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding-top: 80px;
        }
        .header{
            width: 100%;
            height: 80px;
            background-color: red;
            /*脱离了标准文档流*/

            /*参考点:是以浏览器的左上角*/
            position: fixed;
            top:0;
            left: 0;
            z-index: 10000;

        }
        .active{
            position: relative;

        }
    </style>
</head>
<body>

    <div class="header"></div>

    <p>beauty1</p>
    <p>beauty2</p>
    <p>beauty3</p>
    <p>beauty4</p>
    <p>beauty5</p>
    <p>beauty6</p>
    <p>beauty7</p>
    <p>beauty8</p>
    <p>beauty9</p>
    <p>beauty10</p>
    <p>beauty10</p>
    <p>beauty10</p>
    <p>beauty10</p>
    <p>beauty10hulaquan</p>
    <p>beauty10</p>
    <p>beauty10</p>
    

    

    
</body>
</html>
固定定位.再一次说下固定定位和相对定位
相对定位的的特点:
1,开启相对定位以后,如果不指定偏移量,元素位置不会发生变化
2,相对定位的元素是相对于其自身在文档流中的位置进行定位
3,相对定位的元素不会脱离文档里流
4,相对定位的元素会使元素提升一个层级
5,相对定位不会改变元素的性质,块还是块,内联元素还是内联元素

绝对定位的特点:
1,绝对定位的元素会完全脱离文档流
2,绝对定位的元素如果不设置偏移量,不会改变位置
3,绝对定位会提升元素的层级
4,一般与设置相对定位的父盒子一块使用, 子绝父相
5,绝对定位会改变元素的性质,内联元素变成块元素,块元素变成内联元素

二 绝对定位的盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="content.css"> -->
    <!-- <link rel="stylesheet" href="main.css"> -->
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 14px;

        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        input{
            border: 0;
            outline: 0;
        }
        .father{
            width: 100%;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .box{
            width: 400px;
            height: 100px;
            background-color: green;
            position: absolute;

            /**/
            left: 50%;
            margin-left: -200px;
        }


    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>
    
</body>
</html>

三  z-index

<!DOCTYPE html>   #遵从一句话,谁的值大,就显示谁的属性,但是双方若有父亲,则谁的父亲谁的值大,谁的厉害,如果
#父亲不厉害,儿子再厉害也没有用 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father1{ width: 300px; height: 300px; background-color: red; position:relative; z-index: 3; } .child1{ width: 100px; height: 100px; background-color: purple; position: absolute; top: 280px; left: 350px; z-index: 20; } .father2{ width: 300px; height: 300px; background-color: green; position:relative; z-index: 2; } .child2{ width: 100px; height: 100px; background-color: yellow; position: absolute; top: 0; left: 350px; z-index: 21; } </style> </head> <body> <div class="father1"> <div class="child1"></div> </div> <div class="father2"> <div class="child2"></div> </div> </body> </html>

 

css 固定定位

标签:style   浏览器   属性   span   dex   relative   ref   styles   NPU   

原文地址:https://www.cnblogs.com/lxx7/p/9687536.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!