关于position定位下的各种属性说明!-softbar
在這里詳細講解一下,希望能讓更多的新手理解能夠合理去理解position定位!
代碼如下:
.box2:"我"一直沒有找到依靠.所以"我"會停靠在瀏覽器的左上方.
.relative下的box:.relative是"我"的依靠.如果.relative塊沒有設置position:relative;"我"會一直往上尋找有position:relative;的依靠.如果一直沒有目標."我"會以瀏覽器的左上方依靠."我"一直沒有找到依靠.所以"我"會停靠在瀏覽器的左上方.softbar
?http://www.softbar.com/?
.relative的塊是父級
.box是子級.
當給.relative設置position:relative;的時候,.box塊就會以.relative塊的左上方為基準,(在給了.box塊的position:absolute;top:0;left:0;的前提下哦)
特別注意.當一個內聯元素:比如"span標簽",給了position定位后.會在不轉display:block;的情況下擁有塊的屬性.
整體代碼:
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" ?/>
<title>positon方法說明</title>
<style type="text/css">
.relative{
?? ? ? ?width:300px;
?? ? ? ?height:100px;
?? ? ? ?background:yellow;
?? ? ? ?position:relative;
?? ? ? ?margin:55px auto;
?
}
.box{
?? ? ? ?width:200px;
?? ? ? ?height:95px;
?? ? ? ?background:blue;
?? ? ? ?position:absolute;
?? ? ? ?top:0;
?? ? ? ?left:0;
?? ? ? ?color:#fff;
?? ? ? ?font-size:12px;
}
.box2{width:200px;height:50px;background:orange;position:absolute;top:0;left:0;}
</style>
</head>
<body>
?
?? ? <div class="relative">
?? ? ? ? ? ? ? ?<div class="box">
?? ? ? ? ? ? ? ? ? ? ? ?.relative是"我"的依靠.如果.relative塊沒有設置position:relative;"我"會一直往上尋找有position:relative;的依靠.如果一直沒有目標."我"會以瀏覽器的左上方依靠.
?? ? ? ? ? ? ? ?</div>
?
?
?? ? </div>
<div class="box2">
"我"一直沒有找到依靠.所以"我"會停靠在瀏覽器的左上方.
</div>
<div>
<p>.relative的塊是父級</p>
<p>.box是子級.</p>
<p>當給.relative設置position:relative;的時候,.box塊就會以.relative塊的左上方為基準,<span style="color:red">(在給了.box塊的position:absolute;top:0;left:0;的前提下哦)</span></p>
</div>
<p style="color:orange;font-weight:bold">特別注意.當一個內聯元素:比如"span標簽",給了position定位后.會在不轉display:block;的情況下擁有塊的屬性.</p>
?
?
?
?
</body>
</html>
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的关于position定位下的各种属性说明!-softbar的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于iis部署的一些小问题
- 下一篇： 软件开发人员需要的不仅是技术，也不是文档