CSS-定位
定位
文档流
文档流，是指盒子按照HTML标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
关于定位
我们可以使用css 的 position 属性来设置元素的定位类型，postion的设置项如下：
- relative 生成相对定位元素元素所占据的文档流位置保留，元素本身相对自身原位置进行偏移。
- absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
- fixed生成固定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流上方，相对于浏览器窗口进行定位。
- static 默认值，没有定位，元素出现在正常的文档流中，相对于取消定位属性或者不设置定位属性。
- inherit 从父元素继承 position 属性的值。
相对定位
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin:50px auto 0;
}
/*公共属性*/
.box01,.box02{
width: 300px;
height: 100px;
margin: 10px;
}
.box01{
background-color: green;
/*相对定位*/
position: relative;
left: 50px;
top: 50px;
}
.box02{
background-color: gold;
}
</style>
</head>
<body>
<div class="con">
<!-- 文档流按照一定的规律，先写的先排，后写的后排。 -->
<!-- 文档流的位置是保留的不然 挪动元素1 的时候 元素2 的位置也会变化 -->
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin:50px auto 0;
/*给box01 的父级设置相对定位*/
position:relative;
}
/*公共属性*/
.box01,.box02{
width: 300px;
height: 100px;
margin: 10px;
}
.box01{
background-color: green;
/*绝对定位*/
/*位置脱离文档流*/
/*他去找定位的父级，相当于上一个设置的父级元素进行定位，如果找不到相对于body元素进行定位。*/
/*父级有定位属性之后自己会参照父级进行定位。*/
position:absolute;
left: 50px;
top: 50px;
}
.box02{
background-color: gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin:50px auto 0;
/*固定定位找的是浏览器窗口不会受到影响*/
position: relative;
}
/*公共属性*/
.box01,.box02{
width: 300px;
height: 100px;
margin: 10px;
}
.box01{
background-color: green;
/*固定定位*/
position:fixed;
left: 50px;
top: 50px;
}
.box02{
background-color: gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
定位元素的偏移
定位元素还需要用left 、 right 、 top 或者 bottom 来设置相对于参照元素的偏移值。
定位元素层级
定位元素时浮动的正常的文档流之上的，可以用z-index 属性来设置元素的层级。
伪代码如下：
.box01{
......
position:absolute; /*设置了绝对定位*/
left: 200px; /*相对于参照元素左边向右偏移了200px*/
top: 100px; /*相当于参照元素向下偏移了100px*/
z-index: 10; /*将元素层级设置10*/
}
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转换未行内块元素
菜单弹框
<!DOCTYPE html>
<html>
<head>
<title>定位实例02</title>
<style type="text/css">
.menu{
height: 80px;
width: 960px;
background-color: gold;
/*定位：固定定位*/
position: fixed;
top:0px;
left:50%;
/*小技巧 用margin-left 的负值 */
margin-left: -480px;
}
p{
text-align: center;
}
.popup{
width: 500px;
height: 300px;
border:1px solid #000;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -251px;
top: 50%;
margin-top: -150px;
z-index: 9999
}
.popup h2{
background-color: gold;
margin: 10px;
}
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
opacity: 0.5;
z-index: 9998;
}
.pop_con{
display: block;
}
</style>
</head>
<body>
<div class="menu">菜单文字</div>
<div class="pop_con">
<div class="popup">
<h2>弹框的标题！</h2>
</div>
<div class="mask"></div>
</div>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>网页文字</p>
</body>
</html>
浙公网安备 33010602011771号