本文详细介绍了CSS position属性的四个值：static、fixed、relative和absolute，以及它们在页面布局中的应用。通过实例展示了如何使用这些定位方式创建导航栏等效果，并强调了各定位方式对元素位置的影响。同时提到了initial、inherit和unset等其他值的含义。
本篇教程介绍了HTML+CSS入门 CSS position属性学习，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
1. static
默认值。没有定位，元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
html>
position* {
padding: 0;
margin: 0;
}
.static {
position: static;
top: 10px;
left: 10px;
width: 100px;
height: 200px;
background: yellow;
}
金黄色方块会在左上角显示，没有偏移。
2. fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
这个比较好理解，只和窗口有关，与父元素，文档流都无关。
html>
position* {
padding: 0;
margin: 0;
}
.fixed-outer {
position: fixed;
top: 20px;
left: 20px;
width: 20px;
height: 20px;
background: yellow;
}
.fixed-inner {
position: fixed;
top: 40px;
left: 40px;
width: 20px;
height: 20px;
background: red;
}
left就是左边界距离视窗左边距的位置，right就是右边界距离视窗右边距的位置，top，bottom同理。top和bottom或者left和right同时存在，只有top或者left生效。
小广告效果：
html>
position* {
padding: 0;
margin: 0;
}
.fixed {
position: fixed;
right: 0px;
bottom: 50px;
width: 200px;
height: 100px;
background: yellow;
}
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
3. relative
生成相对定位的元素，相对于其正常位置进行定位。
相对元素正常应该在的位置移动，元素所占的空间位置不变，但是显示的位置发生偏移。
left是向右偏移，right是向左偏移(这么说好奇怪，但是…应该没错吧……)，top向下偏移，bottom向上偏移。
html>
position* {
padding: 0;
margin: 0;
}
.div {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.relative1 {
position: relative;
left: 10px;
top: 10px;
border-color: red;
}
.relative2 {
position: relative;
right: 10px;
bottom: 10px;
border-color: green;
}
4. absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(如果没有这样的父元素呢？emmm……应该是整个文档最外层的框……吧……
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
absolute元素会附带 display:block 效果，同时，设置absolute后，元素会脱离文档流。
1. 如果不设置"left", "top", "right" 以及 "bottom"，会显示在正常应该显示的位置。
html>
position.relative {
width: 300px;
height: 300px;
border: 1px solid;
position: relative;
left: 100px;
top: 100px;
}
.absolute {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
}
outer
2. 设置了偏移……(一下父元素全部指 static 定位以外的第一个父元素
设置了left 将以父元素的左边界为基准 向右偏移 垂直方向和之前相同。
设置了right 将以父元素的右边界为基准 向左偏移 垂直方向和之前相同。
设置了top 将以父元素的上边界为基准 向下偏移 水平方向和之前相同。
设置了bottom 将以父元素的下边界为基准 向上偏移 水平方向和之前相同。
html>
position.relative {
width: 300px;
height: 300px;
border: 1px solid;
position: relative;
left: 100px;
top: 100px;
}
.absolute1, .absolute2, .absolute3, .absolute4, .absolute5 {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid red;
}
.absolute2 {
left: 60px;
border-color: green;
}
.absolute3 {
right: 10px;
border-color: yellow;
}
.absolute4 {
top: 0;
border-color: pink;
}
.absolute5 {
bottom: 10px;
border-color: blue;
}
outer
5. others
inherit：继承父元素的值。
initial： 初始值，即默认值，static。
unset： 非继承属性，相当于initial，static。
6. navigation bar
效果见右下角 >_<
html>
position.right-nav * {
margin: 0;
padding: 0;
}
.right-nav {
position: fixed;
right: 10px;
bottom: 150px;
}
.right-nav li {
list-style-type: none !important;
position: relative;
}
.right-nav li a {
text-decoration: none;
display: block;
width: 150px;
line-height: 30px;
text-align: center;
background: #666;
border-bottom: 1px solid;
color: #fff;
}
.right-nav li a:hover, .right-nav li a:active {
background: #ccc;
}
.right-nav .summary {
position: absolute;
right: 150px;
top: 0px;
line-height: 30px;
height: 30px;
width: 400px;
background: #ccc;
color: #fff;
text-align: center;
display: none;
}
.right-nav li:hover .summary {
display: block;
font-size: 12px;
border-right: 1px solid #fff;
}
- 1. static默认值。没有定位，元素出现在正常的流中。
- 2. fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
- 3. relative生成相对定位的元素，相对于其正常位置进行定位。
- 4. absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- 5. othersinherit & initial & unset
- 6. navigation bar根据定位写一个导航栏。
。
1. static
默认值。没有定位，元素出现在正常的流中。
2. fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
3. relative
生成相对定位的元素，相对于其正常位置进行定位。
4. absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
5. others
inherit & initial & unset
6. navigation bar
根据定位写一个导航栏。
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
扫一扫
2021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
