CSS定位之position

1、static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .block{
            position: relative;
            left: 10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 2px solid blue;
            box-sizing: border-box;
        }
        .block:nth-child(2){
            border-color: red;
            position: static;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
</body>
</html>

显示效果

设定了ABC相对定位且向右偏移10px,但是B设定了static,元素回到原来位置

2、relative

3、absolute

寻找最近定位的祖先元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .parent{
            width: 300px;
            height: 300px;
            background-color: yellow;
            border: 2px solid #000;
        }
        .child{
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 50px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
</html>

child元素绝对定位，设置宽为50%,虽然父级元素parent设了宽为300px,但是没有设置定位，所以child不会以此参照，最终宽为body的50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .parent{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: yellow;
            border: 2px solid #000;
        }
        .child{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border: 2px solid blue;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
</html>

子绝父相，子lrtb都为0且未设宽高，子与父同宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .parent{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: yellow;
            border: 2px solid #000;
        }
        .child{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 50%;
            height: 50px;
            border: 2px solid blue;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
</html>

子绝父相，子居中显示，其他方向居中也类似

上下居中显示：
.child{
            position: absolute;
            top: 0;
            bottom: 0;
            margin: 0 auto;
            width: 50%;
            height: 50px;
            border: 2px solid blue;
            background: skyblue;
        }
上下左右居中显示：

.child{

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto auto;

width: 50%;

height: 50px;

border: 2px solid blue;

background: skyblue;

}

4、fixed

固定定位是相对于视口

5、sticky

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .logo{
            height: 120px;
            background-color: yellow;
        }
        .nav{height: 60px;background-color: skyblue;position: sticky;top:0;}
        .content{height: 1200px;background-color: #ccc;}
        .footer{height: 120px;background-color: red;}
    </style>
</head>
<body>
   <div class="logo">logo</div>
   <div class="nav">nav</div>
   <div class="content">
       <p>2017年8月26日 - 是这样的,我想动态修改laydate选中的日期,比如我用input初始化的话,那我可以用element.value="2017-08-28"来赋值,
但是position=static的方式,我没有找...</p>
   </div>
   <div class="footer">
       footer
   </div>
</body>
</html>

该属性在IE浏览器还不兼容

posted on 2020-07-09 10:57 ksy_c 阅读(142) 评论(0) 编辑收藏举报