1.定位的屬性及特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
width:400px;
height:400px;
border:10px solid red;
margin:0 auto;
position: relative;
/*left:300px;*/
}
#box2{
width:100px;
height:100px;
background: yellow;
position: absolute;
left:10px;
top:30px;
}
</style>
</head>
<body>
<!--
定位： 把一個元素 按照一定的方式 定到頁面的某一個位置
position
相對定位 relative
針對自己本身的位置進行定位
絕對定位 absolute
針對有定位的父級的原點進行定位，如果父級沒有定位，會找父級的父級身上有沒有定位，如果有，針對父級的父級的原點進行定位，以此類推，如果都沒有定位，針對document進行定位
溫馨小提示：
絕對定位即使沒有初始值，也一定要設置值
left:0px;
top:0px;
固定定位 fixed
針對頁面窗口進行定位
溫馨提示：
IE6 不支持固定定位
偏移量
left
top
right
bottom
溫馨提示
left top 比 right bottom 的優先級要高
-->
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
2.三種的定位的特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
background: red;
position: absolute;
/*float:left;*/
}
#box2 {
width:200px;
height:200px;
background: yellow;
}
span {
width:100px;
height:100px;
background: red;
position: fixed;
left:0px;
}
.span1 {
z-index: 1;
}
.span2{
z-index: 2;
}
.span4{
z-index: 10;
}
</style>
</head>
<body>
<!--
定位的三種特性
相對定位 relative
1.不影響元素本身的特性
2.不使元素脫離文檔流
3.提升層級
4.無法觸發BFC
5.針對自己本身進行定位
絕對定位 absolute
1.會使元素完全脫離文檔流
2.內容撐開寬度和高度
3.使元素支持所有的CSS樣式
4.提升層級
z-index:數值; 定位層級設置
數值越大，層級越高
5.絕對定位要和相對定位配合使用
6.如果有定位父級，針對定位父級發生偏移，沒有定位父級，針對document進行偏移
7.如果絕對定位的子級有浮動，可以省略清浮動的操作
固定定位 fixed
1.不兼容IE6
2.針對窗口進行定位
3.如果固定定位的子級有浮動，可以省略清浮動的操作
-->
<!-- <div id="box1">div1</div>
<div id="box2">div2</div> -->
<!-- <span>span1</span> -->
</body>
</html>
3.定位和BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:350px;
border:10px solid #000;
position: relative;
}
span {
width:100px;
height:100px;
background: red;
text-align: center;
line-height: 100px;
font-size:40px;
float:left;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
4.定位的下例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:400px;
height:400px;
border:4px solid #000;
background: yellow;
position: relative;
overflow: hidden;
}
span {
width:400px;
height:100px;
background: red;
position: absolute;
top:400px;
transition:0.01s;
}
div:hover span{
top:300px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
5.派生選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*span {
border:1px solid red;
}*/
#box1 span {
border:1px solid red;
}
#box2 span {
display: inline-block;
width:100px;
height:100px;
background: yellow;
}
</style>
</head>
<body>
<!--
派生選擇器
是由 id選擇器 class選擇器 標籤名選擇器組合而成
id選擇器 10000
class選擇器 100
標籤名選擇器 1
#box2 span 10000 + 1 10001
-->
<div id="box1">
<span>我是box1的span</span>
<span>我是box1的span</span>
<span>我是box1的span</span>
<span>我是box1的span</span>
</div>
<div id="box2">
<span>我是box2的span</span>
<span>我是box2的span</span>
<span>我是box2的span</span>
<span>我是box2的span</span>
</div>
</body>
</html>
6.派生選擇器的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
#box1 {
width:550px;
margin:0 auto;
border:1px solid #E4AD7F;
}
#box1 li {
width:100px;
height:50px;
background: #A5EEA2;
float:left;
margin-right: 10px;
text-align: center;
line-height: 50px;
font-size:24px;
}
#box1 li a {
color:#E99B1E;
}
#box1 .cla1{
background: red;
}
#box1 .cla1 a {
color:#fff;
}/**/
/*
id 10000
class 100
div 1
#box1 li 10000 + 1
#box1 li a 10000 + 1 + 1
#box1 .cla1 10000 + 100
#box1 .cla1 a 10000 + 100 + 1
*/
</style>
</head>
<body>
<div id="box1">
<ul>
<li>
<a href="#">導航1</a>
</li>
<li>
<a href="#">導航2</a>
</li>
<li>
<a href="#">導航3</a>
</li>
<li>
<a href="#">導航4</a>
</li>
<li>
<a href="#">導航5</a>
</li>
</ul>
</div>
</body>
</html>
