首頁 > 開發者 > 網站開發

由一位壇友的布局想到的定位問題：absolute和relative，壇友relative

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

由一位壇友的布局想到的定位問題：absolute和relative，壇友relative

壇友的問題和相關代碼如下：

看看下面的代碼。運行有問題。但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left;”就正常了，我想不明白為什嗎？

   1: <div class="shayne">逆光國際逆光國際逆光國際</div>
   2: <script language="javascript">
   3: //建立一個showhidediv的方法，直接跟ID屬性   
   4: function showhidediv(id){
   5: var age=document.getElementById("msg_2");
   6: var name=document.getElementById("msg_1");
   7: if (id == 'name') {
   8:    if (name.style.display=='none') {
   9:     age.style.display='none';
  10:     name.style.display='block';
  11:    }
  12: } else {
  13:    if (age.style.display=='none') {
  14:     name.style.display='none';
  15:     age.style.display='block';
  16:    }
  17: }
  18: }
  19: </script>
  20: <div id="show" style="float:left;" onMouseMove='showhidediv("name")';><img src="file:///F|/Dreamveaver/NIC/images/金閃閃.jpg" width="75" height="54" alt="1" />
  21:
  22: </div>
  23:
  24: <div id="show1" style="position:absolute; top:20px;left:10px;onMouseMove='showhidediv("age")';>Age：</div>
  25:
  26: <div id="msg_1" style="display:none;float:left;">林雨林</div>
  27: <div id="msg_2" style="display:none;float:left;">18</div>

我的第一反應就是LZ的問題出現在定位上，後來驗證了我的想法。這裡就不再贅述了。

看看w3school關於定位的一個概述：“對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們複習一下學過的知識吧：相對定位是“相對於”元素在文檔中的初始位置，而絕對位置是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。 ”

由此，我就想扒一扒position到底是個什麼鳥樣？

先寫了一個正常情況下的文檔：

   1: <!DOCTYPE HTML>
   2: <html>
   3:     <head>
   4:         <meta http-equiv="content-type" content="text/html;charset=utf-8">
   5:         <title>Location</title>
   6:     <style type="text/css">
   7:       .allDiv{
   8:         width: 200px;
   9:         height: 200px;
  10:       }
  11:       .div1{
  12:         border: 1px solid red;
  13:       }
  14:       .div2{
  15:         border: 1px solid blue;
  16:       }
  17:       .div3{
  18:         border: 2px solid black;
  19:         width: 100px;
  20:         height: 100px;
  21:       }
  22:     </style>
  23:     </head>
  24:     <body>
  25:       <h3>正常情況(沒有採用定位,沒有margin和padding)</h3>
  26:       <div class="div1 allDiv">
  27:         這是div1
  28:          <div class="div3">這是div3</div>
  29:       </div>
  30:       <div class="div2 allDiv">這是div2</div>
  31:     </body>
  32: </html>

效果:

然後修改div3，給div3進行絕對位置：

   1: //修改div3的css
   2: .div3{
   3:         border: 2px solid black;
   4:         width: 200px;
   5:         height: 200px;
   6:         position: absolute;
   7:         top: 200px;
   8:         left: 300px;
   9:       }
  10:
  11: //修改div3的內容
  12: <div class="div3">這是div3
  13: <p>因為div1沒有絕對位置,所以div3的位置是相對於body,即最初的包含元素</p>
  14: </div>

效果：

div3的位移距離是相對於body的左上方。然後我們給div2進行相對定位（元素任輝佔據“原位置”）

   1: //修改div2的css
   2: .div2{
   3:         border: 1px solid blue;
   4:         position: relative;
   5:         top: 100px;
   6:         left: 200px;
   7:       }
   8: //修改一下div2的內容
   9: <div class="div2 allDiv">這是div2<p>div2相對定位，相對"原位置"位移</p></div>

效果：

接下來呢，我們給div1和div3絕對位置，三個div的位置均會發生變化

   1: //修改div1的css
   2: .div1{
   3:         border: 1px solid red;
   4:         position: absolute;
   5:       }
   6:
   7: //修改div2和div3的內容
   8: <div class="div3">這是div3
   9: <p>因為div1絕對位置,所以div3的位置是相對於div1,即最近以定位的"祖先元素"</p>
  10: </div>
  11:
  12: <div class="div2 allDiv">這是div2
  13: <p>div2相對定位，因為最近有定位元素，所以相對以定位元素(div1)位移</p>
  14: </div>

效果：

但是，當給div1進行相對定位時，div2的位置又奇妙的變化了

   1: .div1{
   2:         border: 1px solid red;
   3:         position: relative;
   4:       }
   5: //為了對比明顯，給div2添加了color:red樣式

效果：

也就是說，相對定位在附近沒有絕對位置元素時，則相對於原位置進行“位移”；反之，則根據最近已經定位（position:absolute）的元素進行“位移”。

以上測試均在FF中進行。不足之處，敬請諒解。

來源：http://www.ido321.com/552.html


對於div定位的問題:position:relative;與position:absolute;

你可以分別用絕對位置和相對定位來控制4個容器之間的位置關係，容器3離頁面頂端10個像素，可以用(position:absolute;top：10px;），而其次是容器4距離容器3底部10個像素，可以用（position:relative;top：10px;），而下面的直接以此類推。不知道你還能明白我的意思哈~
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style>
body{ margin:0px; padding:0px;}
.style3{ width:400px; height:100px; border:1px solid #333; position:absolute; top:10px;}
.style4{ width:400px; height:100px; border:1px solid #333; position:absolute; top:120px;}
.style1{ width:200px; height:100px; border:1px solid #333; position:absolute; top:230px;}
.style2{ width:200px; height:100px; border:1px solid #333; position:absolute; top:340px;}
</style>
<body>
<div class="style1">容器1</div>
<div class="style2">容器2</div>
<div class="style3">容器3</div>
<div class="style4">容器4</div>
</body>
</html>...餘下全文>>
 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More