CSS之定位
在学习CSS定位知识之前,我们先来了解一个重要的概念,有助于理解定位元素的使用。
1、文档流的概念
文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素。
2、脱离文档流
脱离文档流指的是元素打乱了这个排列,或是从排版中拿走。
使元素脱离文档流的两种方法:浮动和定位。
3、定位详解
3.1 position:static(默认定位)
使用该属性时,该属性为默认值
此时top、left、bottom、right以及z-index这些属性都是无效的,相当于没有。
<style>
.demo{
width: 200px;
height: 200px;
background: rgb(142, 164, 238);
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: rgb(8, 202, 96);
}
.box3{
width: 50px;
height: 50px;
background: rgb(43, 5, 211);
}
.box4{
width: 50px;
height: 50px;
background: rgb(185, 20, 116);
}
</style>
<body>
<div class="demo">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
解读:
div是块级元素,每个标签都是各占一行。所以,按着从上自下的文档流顺序依次往下排列。而static作为默认的定位元素,在这里不需要书写。
3.2 position:relative(相对定位)
relative:生成相对定位的元素,通过 top,bottom,left,right 的位置相对于其正常位置进行定位;其中的相对定位(相对)指的是相对于元素在默认流中的位置。
3.2.1未添加定位元素示例(默认流状态)
#demo{
width: 200px;
height: 200px;
background: rgb(95, 165, 231);
}
#box1{
width: 100px;
height: 100px;
background:red;
}
<div id="demo">
<div id="box1"></div>
</div>
解读:box1在默认流的情况下的位置(效果图)
3.2.2添加定位元素后
#demo{
width: 200px;
height: 200px;
background: rgb(95, 165, 231);
}
#box1{
width: 100px;
height: 100px;
background:red;
position: relative;/**以下代码为定位元素代码**/
top: 50px;
left: 100px;
}
<div id="demo">
<div id="box1">我是box1</div>
</div>
解读:
使用position:relative元素后,box1脱离了文档流,使得box1根据默认文档流位置进行上、左的位置变换。
3.3 position:absolute(绝对定位)
absolute:相对的是向上(除static默认元素外)的定位父级元素,如果没有则是相对于文档进行定位。(一般会以relative作为定位参照)
样式
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 200px;
height: 200px;
background-color: aqua;
}
#box2 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 300px;
background-color: red;
}
</style>
结构
<body>
<div id="box1">盒子1
<div id="box2">盒子2</div>
</div>
</body>
解读:
此时,box2有定位元素absolute,背后的操作是box2会往上找,直到找到除static默认以外的定位元素,但是上面box1并没有定位元素,所以box1最终会以文档(document)来定位,距离文档顶部0px,左边200px。
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 200px;
height: 200px;
position: relative;
background-color: aqua;
}
#box2 {
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 100px;
background-color: red;
}
</style>
解读:结构与上面一样,此时box2中有absolute定位元素,box1中有relative定位元素,而box2作为box1的父级。所以,box2此时是相对于box1来定位的。
3.4 position:fixed(固定定位)
fixed:固定定位,当屏幕滚动使用了固定定位的元素,将不会随屏幕滚动。
样式
<style>
.box1{
width: 100px;
height: 100px;
position: fixed;
top: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 900px;
/* 脱离文档流 往左浮动 */
float: left;
background-color: #00FF00;
}
</style>
结构
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
解读:
因为盒子2的高度高,所以当用户滚动屏幕时,盒子2会随着屏幕滚动而走,但是盒子1使用了fixed定位,始终固定在当前位置。
3.5 position:sticky(粘性定位)
sticky:粘性,当屏幕上划时,使用了粘性定位的元素,可以在页面最顶端固定住,常用了导航栏。
样式
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
结构
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
未滚动前效果
滚动后效果
4、寄语
定位是html和css阶段非常重要的知识点,只有自己掌握了这些知识点,才能在页面编写上,完美的将每一个板块写好。这样会使得你的页面布局非常的美观。