定位 (position)
元素的定位属性
元素的定位属性主要包括定义模式和边偏移两部分。
1、边偏移
边偏移属性
描述
top
顶端偏移量，定义元素相对于其父元素上边线的距离
right
右侧偏移量，定义元素相对于其父元素右边线的距离
bottom
底部偏移量，定义元素相对于其父元素下边线的距离
left
左侧偏移量，定义元素相当于其父元素左边线的距离
也就是说，以后定位要和这偏移量配合使用，比如 top: 100px; left: 30px;等等
2、定位模式
在css中，position属性用于定义元素的定位模式，其基本语法格式如下:
选择器{position: 属性值;}
position属性的常用值
值
描述
static
自动定位(默认的定位方式)
relative
相对定位，相对于其原文档流的位置进行定位
absolute
绝对定位，相对于其上一个已经定位的父元素进行
flxed
固定定位，相对于浏览器窗口进行定位
position: static(静态定位)
静态定位(默认值)
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态定位，所谓静态位置就时各个元素在HTML文档流中默认的值。
白话：就时网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性来改变元素的位置。
position: relative(相对定位)
相对定位(自恋型)
相对定位是将元素相对于在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但它在文档流中的位置依然保留。
注意：
1、相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来占有的位置，继续占有。
2、其次，每次移动位置，是以自己的左上角为基点移动(相对于自己来移动位置)，就是说，相对定位的盒子仍然在标准流中，它后面的盒子 仍然以标准流方式对待它。(相对定位不脱标)。
如果说浮动的目的是让多个块级元素在一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。
相对定位占有位置是不脱标的。
position: absolute(绝对定位)
绝对定位 (拼爹型)
绝对定位的元素的位置相对于最近已经定位的父级元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
绝对定位是完全脱标的，不占有位置 (漂起来的)。
绝对定位父亲没有定位，孩子以浏览器为基准点对齐。
绝对定位父亲又定位，孩子以最近的带有定位的父级为基准点对齐(absolute和relative都可以)。
子绝父相
如果给父亲加绝对定位影响布局，所以给父级加相对定位。
父亲加相对定位，孩子加绝对定位，最好。
定位的盒子水平居中
加了绝对定位过的盒子margin: 左右 auto;不起作用。
定位盒子的水平居中的算法
1、先让子盒子走父盒子的width的一半及left: 50%;。
2、再让子盒子向反方向走自己宽度的一半 (外边距margin-left: 负的自身一半;)。
定位的盒子垂直居中
1、先让盒子走父级盒子的height一半及top: 50%;
2、在让子盒子向反方向走自身height一半 (margin-top: 负的自身一半;)。
相对定位于绝对定位的使用
Documenttitle>margin:0;
padding:0;
}
.da {
width:800px;
height:400px;
background-color:#000;
border:1px solid #ccc;
margin:20px auto;
position:relative;
}
.xiao {
width:800px;
height:400px;
}
.da a{
display:inline-block;
width:64px;
height:64px;
background-color:rgba(0,0,0, .3);
position:absolute;
top:50%;
margin-top:-32px;
}
.l {
left:0;
}
.r {
right:0;
}
ul {
width:140px;
height:20px;
background-color:rgba(255,255,255, .4);
position:absolute;
bottom:10px;
left:400px;
margin-left:-70px;
border-radius:20px 20px;
line-height:20px;
}
ul li{
list-style:none;
float:left;
height:10px;
width:10px;
background-color:rgba(255,255,255, .5);
margin:5px;
border-radius:50%;
}
.current {
background-color:#f10215;
}style>
head>
a>
a>ul>
div>
body>
html>
position: fixed(固定定位)
固定定位(认死理型)
固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的位置，不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口固定的位置。
固定定位有两点：
1、固定定位的元素和父级元素没有任何关系，只认浏览器。
2、固定定位完全脱标，不占有位置，不随滚动条滚动。
1e6等低版本浏览器不支持固定定位。
固定定位案例：
Documenttitle>margin:0;
padding:0;
}
ul,a{
list-style:none;
text-decoration:none;
}
.w{
width:50%;
margin:0 auto;
}
nav{
width:100%;
height:41px;
background:#FCFCFC;
border-top:3px solid #FF8500;
border-bottom:1px solid #edeef0;
position:fixed;
left:0;
top:0;
z-index:1;
}
nav a{
display:inline-block;
height:41px;
line-height:41px;
font-size:14px;
color:#4c4c4c;
text-decoration:none;
padding:0px 15px;
}
nav a:hover{
background:#eee;
}
.zx{
height:2000px;
background-color:skyblue;
margin:45px auto;
position:relative;
}
.new{
position:absolute;
left:50%;
top:200px;
margin-left:-119px;
height:294px;
width:238px;
border:1px solid #D9E0EE;
border-top:3px solid #FF8400;
}
h3{
height:35px;
font-size:16px;
font-weight:normal;
line-height:35px;
border-bottom:1px solid #d9e0ee;
padding-left:12px;
}
.new img{
width:220px;
height:160px;
margin:7px 0 0 9px;
}
.new ul{
margin-left:8px;
}
.new ul li{
padding-left:12px;
line-height:26px;
background:url("1.png") no-repeat left center;
background-size:5px 5px;
}
.new ul li a{
font-size:12px;
color:#666;
}
.cebian{
position:fixed;
margin:40px 100px;
}
.cebian ul li{
height:50px;
width:100px;
line-height:50px;
font-weight:400;
font-size:18px;
text-align:center;
border-radius:10%;
cursor:pointer;
}
.cebian ul li:hover{
background-color:#f10215;
color:#fff;
}
.cebian .c_red{
background-color:#f10215;
color:#fff;
}style>
head>
div>
nav>
ul>
div>
7476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
