HTML5學習_day06(2)--html之相對定位
阿新 • • 發佈：2019-01-02
相對定位就是相對於自己原來的位置 只是內容偏移了而已
並且原有佔用的空間依舊存在 不會被其他元素填充
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>相對定位</title> <style type="text/css"> #div{ width: 1000px; border: 3px solid red; } #div div{ width: 200px; height: 200px; border: 4px solid; display: inline-block; } /*#div .div1{ position: relative; left: 230px; right:100px; 優先順序 left>right top>bottom top:100px; bottom: 100px; margin-left:50px; }*/ /* 問題一 #div .div1{ position: relative; top:50px; margin-top: 100px; 這樣設定會整體下移 要重新設定對齊方式 vertical-align: top; }*/ </style> </head> <body> <!--1.什麼是相對定位(參考點永遠是自身的左上角) 也就是相對於自己在文件流中的位置進行定位。 2.相對定位的幾個特性 1.不脫離文件流，原有位置空間被保留 2.不影響元素本身屬性的設定 4.如果給元素設定了相對定位膽不設定偏移量，元素本身就不受任何影響的。 --> <div id="div"> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div> </div> <!--注意： 1.如果一個定位元素，同時設定了top和bottom，top的優先順序更高，會顯示top設定的值。 2.一個定位元素，如果同時設定了left和right,那麼優先順序取決於網站語言，在英語網頁中left優先順序更高，在阿拉伯語言的網頁中right優先順序更高 3.如果一個元素設定了定位(甚至是偏設定了移)，其他元素在排版的參考的依然是那個元素的原有位置(沒有設定偏移的位置) 4.如果一個元素設定了相對定位，原有位置空間被保留，即使該元素做偏移，其他元素也不會佔據他原有(偏移前)的位置。--> z-index:預設是0; </body> </html>