- 方位名称：
left right top bottom - 1）静态定位
静态定位就是元素标准流的显示方式。
div{
width: 100px;
height: 100px;
background-color: red;
position: static; 静态定位
left: 300px; 距离左边300px
}
没有向左移动300px（left: 300px; ）
-
2）绝对定位
1，当给一个单独的元素设置绝对定位，以浏览器左上角为基准定位。
2，当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位看浏览器的左上角。
3，当盒子发生嵌套关系的时候，如果父盒子设置了定位，子盒子设置定位以父盒子的左上角为准。
4，给盒子设置了绝对定位，该盒子不占位置（脱离了标准流）
5，给行内元素设置绝对定位后，改元素转换为行内块元素（第三种转换方式）
6，设置了绝对定位的盒子如果没有给它设置宽度，它就会自己内容的宽度，要想是整个屏幕的宽度就要设置width: 100%;div{width: 500px; height: 500px; background-color: red; position: absolute; left: 100px; /* top: 100px; right: 0px; */ } .one{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 600px; } </style> </head> <body> <div > <div class="one"></div> </div> -
4）相对定位
1，元素设置了相对定位后占原来的位置。
2，设置相对定位以自己的位置为参照。
3，不能将行内元素转换为行内块元素。
4，有一种用途：子元素绝对定位，父元素相对定位。子元素就可以相对父元素移动。
.one{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 10px;
}
.two{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 10px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
- 5）固定定位
1,不占位置（脱标）
div{
position: fixed;
}
网友评论