定位
絕對定位
position：absolute
相對定位
position：relative
區(qū)別：定位就好比圖層中新開了一個層 讓定位元素在這個新開的圖層上
- 相對定位
就是 雖然新建了一個層 但是原本層所占據(jù)的位置是不被騰出的 就是你占據(jù)不了我 我走了也不給你 - 絕對定位
就顯得大方一點(diǎn) 我走了 我去另外一個層去了 那么我原來那個層的位置留給你們（騰出） 未被定位的元素就會去占據(jù)
(形象了一些 話糙理不糙)
屬性：
left/right ???????? ???????? ??? top/bottom
基準(zhǔn)線是不一樣
top 以上邊為基準(zhǔn)線 ??? bottom 以下邊為基準(zhǔn)線
left 以左邊為基準(zhǔn)線 ?????right 以右邊為基準(zhǔn)線
left/right 只能取其一 ??? top/bottom 只能取其一
只要是定位元素 都可以跟
<style type="text/css">
.box1{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px 0 0 100px;
}
.box1 .box2{
position: relative;
width: 200px;
height: 200px;
background-color: snow;
}
.box1 .box2 .box3{
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color:orangered;
}
</style>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
定位元素的相對性
是看他的父級元素
是往上找 看他的哪個父級元素有定位
如果找父級元素 找到最上層 都沒有定位 那就相對于html 整個文檔 去定位
那要是父級都有定位 那上一層父級元素也有定位 就相對于上一層父級元素定位 就不再往上找
這個往上找相對性 我只要找到有了 哪一個父級有了 就不再往上找
絕對定位（absolute）總結(jié)：
相對于最近的 有定位的父元素絕對定位
如果往上找 并沒有找到 定位的父元素那么就相對html文檔進(jìn)行絕對定位
但是下面這種
相對定位
<style type="text/css">
.box1{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px 0 0 100px;
}
.box1 .box2{
width: 200px;
height: 200px;
background-color: snow;
}
.box1 .box2 .box3{
position: relative;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color:orangered;
}
</style>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
相對定位是相對于它本身定位的 它right和bottom找不找（所以設(shè)置也不起作用） 只能找得找 左側(cè)和上側(cè)
相對定位（relative）一般不會這樣定位
<style type="text/css">
.box{
position: relative;
width: 400px;
height: 400px;
background-color: orangered;
margin: 100px 0 0 100px;
}
.box .box2{
position: absolute;
bottom: 10px;
right: 20px;
width: 200px;
height: 200px;
background-color: snow;
}
</style>
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
一般定位 都這樣寫 相對于父級 進(jìn)行絕對定位
relative一般有兩個作用
- position:relative
就是把父級上面做了一個相對定位 子級向上找時(shí)就可以找到這個父級進(jìn)行絕對定位 - position:relative
box1盒子絕對定位 box2盒子被蓋住 加上這個屬性 就可以使box2在最上層
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: orangered;
}
.box2{
width: 100px;
height: 100px;
background-color: snow;
}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
最初
<style type="text/css">
.box1{
position: absolute;
width: 100px;
height: 100px;
background-color: orangered;
}
.box2{
width: 100px;
height: 100px;
background-color: snow;
}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
非定位的盒子box2被box1遮灼嗬簟（box1絕對定位 被騰出 box2上去占據(jù) 所以 會被蓋渍浯佟）
<style type="text/css">
.box1{
position: absolute;
width: 100px;
height: 100px;
background-color: orangered;
}
.box2{
width: 100px;
height: 100px;
background-color: snow;
}
</style>
<body>
<div class="box2">
</div>
<div class="box1">
</div>
</body>
這個box1是絕對定位 但是box1 上面 還有box2 這個非定位的盒子 （box2就在那）
<style type="text/css">
.box1{
position: absolute;
width: 100px;
height: 100px;
background-color: orangered;
}
.box2{
position: relative;
width: 100px;
height: 100px;
background-color: snow;
}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
position:relative 就使box2上來
z-index z軸的排列
1-999 越大 越靠前（越在上面）
Z軸 朝向我眼睛的軸
<style type="text/css">
.box1{
position: absolute;
width: 100px;
height: 100px;
background-color: orangered;
}
.box2{
position: absolute;
width: 100px;
height: 100px;
background-color: snow;
}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
這個 都是絕對定位 先來的在下面 后來的在上面 所以是snow顏色
<style type="text/css">
.box1{
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: orangered;
}
.box2{
position: absolute;
width: 100px;
height: 100px;
background-color: snow;
}
</style>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
絕對定位的兩欄設(shè)計(jì)
這個是左側(cè)寬度固定 右側(cè)根據(jù)瀏覽器寬度自適應(yīng)
<style type="text/css">
html,
body{
height: 100%;
margin: 0;
overflow-y: hidden;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 100%;
background-color: orangered;
}
.right{
margin-left: 300px;
height: 100%;
background-color: orange;
}
</style>
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
左右調(diào)換
這個是右側(cè)寬度固定 左側(cè)根據(jù)瀏覽器寬度自適應(yīng)
<style type="text/css">
html,
body{
height: 100%;
margin: 0;
overflow-y: hidden;
}
.left{
margin-right: 300px;
height: 100%;
background-color: orangered;
}
.right{
position: absolute;
right: 0;
top: 0;
width: 300px;
height: 100%;
background-color: orange;
}
</style>
<body>
<div class="left">
</div>
<div class="right">
</div>
