您的位置：首页 > Web前端 > CSS

CSS——position定位 static、relative、absolute、fixed、sticky

2020-06-02 20:19 309 查看

position定位

我们常常需要使用定位模型达到布局的目的。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

接下来介绍position的五种定位模型。

一、static自然模型

.box{
position:static;
}

static——静态定位、常规定位、自然定位；默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

二、relative相对定位模型

生成相对定位的元素，相对于其正常位置进行定位。
top/right/bottom/left 以及"z-index” 定位元素偏移量。

.box:nth-child(2){
position: relative;
top: -10px;//在原元素的上边减少10px
left: 10px;//在原元素的左边添加10px
border-color: red;
}

三、absolute绝对定位模型

1.absolute基础知识

.box{
position: absolute;
}

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素框从文档流完全删除。

详解：
1.绝对定位的元素的位置相对于最近的已定位祖先元素进行定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，也就是html；
2.最近已定位祖先元素：可以是父元素，也可以是父元素的父元素，若直属父元素没有定位，会一直向上找，直到找到有定位的祖先元素；
3.最近的已定位祖先元素的要求：该定位必须是static定位以外的定位（可以是absolute、relative、fixed）。

元素的位置通过 “left”, “top”, “right” 以及 "bottom"属性进行规定。
使用absolute的元素的位置与文档流无关，不占据空间。元素绝对定位后生成块状元素，无论原来它在正常文档流中是什么类型的元素。
相对定位一般都是配合绝对定位元素使用。

例子：
1.不设置任何定位时

<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
*{background: gray;}
.one{
height: 300px;
width: 300px;
background-color: yellow;
margin: 100px 100px;
}
.two{
height: 200px;
width: 200px;
background-color: blue;
margin: 100px;
}
.three{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
</body>
</html>

图片展示：
2.给three设置绝对定位

.three{
height: 50px;
width: 50px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}

效果图如下，three的祖先元素two、one都没有设置定位，以最初的文档为定位

3.给three设置absolute和one设置relative定位，two设置static定位

.one{
height: 300px;
width: 300px;
background-color: yellow;
margin: 100px 100px;
position: relative;
}
.two{
height: 200px;
width: 200px;
background-color: blue;
margin: 100px;
position: static;
}
.three{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}

效果图如下，虽然two设置了static定位，但是three却以two的父级元素one为定位。

2.absolute补充知识——设置垂直居中

将top、right、bottom、left设置为0，margin设为auto，她将对齐到最近定位的祖先元素的各边
原理：当top和bottom设置为0，margin为auto时，外边距将会自动填充，呈现上下居中效果。
当left和right设置为0，margin为auto时，外边距将会自动填充，呈现左右居中效果。
举例：

<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
*{background: gray;}
.a{
width: 100px;
height: 100px;
position: relative;
background-color: blue;
}
.b{
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto auto;
background-color: red;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>

效果图：红色在蓝色的正中间

四、fixed固定定位模型

.nav{
position: fixed;
}

生成绝对定位的元素，相对于浏览器窗口进行定位。脱离文档流。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

注意：
固定定位元素不会随着视口滚动而滚动
继承absolute的特点

案例：

<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
.nav{
width: 100%;
height: 50px;
background-color: gray;
position: fixed;
top: 50px;
left: 50px;
}
.con{
height: 800px;
width: 100%;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="con">其他文本</div>
</body>
</html>

效果图如下

五、sticky磁铁定位模型

可以说是相对定位relative和固定定位fixed的结合。
固定定位元素不会随着视口的滚动而滚动。
继承absolute特点。

与fixed区别，在最开始页面不滚动的情况下保持原有样式（不脱离文档流），随着滚动条滚动直到滚动到代码中设置的视口位置而固定不动（此时具有fixed特点）。
图例解释如下：
1、当导航栏设置fixed定位时
代码如下图：

<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
*{
margin: 0;
}
.header{
width: 100%;
height: 50px;
background-color: orange;
font-size: 25px;
}
.nav{
width: 100%;
height: 50px;
background-color: blue;
font-size: 25px;
position: fixed;
top: 0;
}
.con{
height: 1000px;
width: 100%;
background-color: gray;
}
</style>
</head>

<body>
<div class="header">假设这里是一张图片（类似页面顶部的广告)</div>
<div class="nav">假设这里是导航栏 首页|主页|个人中心</div>
<div class="con"></div>
</body>
</html>

效果图如下：蓝色的导航栏（nav）因设置了固定定位，遮住了橘色的广告栏（header）

2.将nav的fixed定位改为sticky定位时

.nav{
width: 100%;
height: 50px;
background-color: blue;
font-size: 25px;
position: sticky;
top: 0;
}

蓝色的导航栏（nav）并没有遮挡橘色的广告（header）栏，并且随着页面滚动，导航栏最终将在视口最上面固定（文档中任然留有nav的位置）。
效果图1：未滚动时。

效果图2：滚动后，导航栏固定在了视口位置

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航