生活随笔
收集整理的這篇文章主要介紹了
CSS之固定定位、相对定位、绝对定位
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、相對定位
相對元素自身所在的原來的位置進行定位。
可以設置 left,right,top,bottom四個屬性
效果：在進行相對定位以后，元素原來所在的位置被保留了，被占用了–》保留站位其他元素的位置不會發生移動
一般情況下，left和right不會同時使用 ,選擇一個方向即可.top和bottom不會同時使用,選擇一個方向即可
優先級：左上>右下
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="width: 500px;height: 500px; background-color: pink;"><div style="width: 100px; height: 100px; background-color: yellow;position: relative;left: 100px;"></div><div style="width: 100px; height: 100px; background-color: red;"></div><div style="width: 100px; height: 100px; background-color: green;"></div></div></body>
</html>
效果展示
相對定位的應用場合：
（1）元素在小范圍移動的時候
（2）結合絕對定位使用
屬性：z-index
設置堆疊順序，設置元素誰在上誰在下。z-index的值大的在上方
注意：z-index屬性要設置在定位的元素上
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="width: 500px;height: 500px; background-color: pink;"><div style="width: 100px; height: 100px; background-color: yellow;position: relative;left: 50px;top: 50px;z-index: 10;"></div><div style="width: 100px; height: 100px; background-color: red;position: relative;z-index: 5;"></div><div style="width: 100px; height: 100px; background-color: green;"></div></div></body>
</html>
效果展示
二、絕對定位
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#outer{width: 200px;height: 200px;background-color: royalblue;margin-left: 100px;}#div1{width: 100px;height: 100px;background-color: thistle;position: absolute;left: 30px;top: 30px;}#div2{width: 100px;height: 100px;background-color: forestgreen;}</style></head><body><div id="outer"><div id="div1">1
</div><div id="div2">2
</div></div></body>
</html>
暫時來說看到的效果：藍色div相對body產生的位移，相對body進行位置的改變，然后藍色div發生位移以后，原位置得到了釋放。橙色div移動上去了！
實際開發中，我們往往讓藍色div在粉色div中發生位移效果：
配合定位來使用：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#outer{width: 200px;height: 200px;background-color: pink;margin-left: 100px;position: relative;}#div1{width: 100px;height: 100px;background-color: cornflowerblue;position: absolute;left: 30px;top: 30px;}#div2{width: 100px;height: 100px;background-color: coral;}</style></head><body><div id="outer"><div id="div1">1
</div><div id="div2">2
</div></div></body>
</html>
效果展示
總結：
當給一個元素設置了絕對定位的時候，它相對誰變化呢？它會向上一層一層的找父級節點是否有定位，如果直到找到body了也沒有定位，那么就相對body進行變化，如果父級節點有定位（絕對定位，相對定位，固定定位），但是一般我們會配合使用父級為相對定位，當前元素為絕對定位，這樣這個元素就會相對父級位置產生變化。無論是上面的哪一種，都會釋放原來的位置，然后其他元素會占用那個位置。
開發中建議使用：父級節點relative定位，子級節點使用絕對定位。
三、固定定位：
應用場合：在頁面過長的時候，將某個元素固定在瀏覽器的某個位置上，當拉動滾動條的時候，這個元素位置不動。
代碼：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div{background-color: red;width: 50px;height: 200px;position: fixed;right: 0px;top: 300px;}</style></head><body><div id="div">1
</div></body>
</html>
總結
以上是生活随笔為你收集整理的CSS之固定定位、相对定位、绝对定位的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
