css中position:relative的真正理解

時間 2019-11-20

原文原文鏈接

　　其實話說一直以來也沒真正去理解好position:relative的用法的真實意義。css

　　我想不少人實實在在用的多都是position:relative和position:absolute結合起來一塊兒用的。html

　　position屬性是用四種定位。默認的是static。ui

　　position:absolute（絕對定位） ——是脫離文檔流，相對於父級元素（包含這個position:relative）定位，固然若是沒有，那就是相對於body定位的。spa

　　position:relative（相對定位） ——單獨使用，我不知道不少人是否是也跟我同樣忽略過它，relative 也是不脫離文檔流，「這個元素會偏移某個距離。可是該元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。」，它是相對於本身來定位的，例如：#main{position:relative;top:-50px;},這時#main會在相對於它原來的位置上移50px。 code

　　position:fixed（固定定位） —— 跟絕對定位有點相似，只是它的父級元素永遠都是視窗自己。xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8">  
<title>position</title>  
<style type="text/css">  
    <!--  
    body{  
        font-size:12px;  
        margin:0 auto;  
    }  
  
    div#demo{  
        position:relative;  
        border:1px solid #000;  
        margin:50px;  
        top:-50px;  
        line-height:18px;  
        overflow:hidden;  
        clear:both;  
        height:1%;  
    }  
  
    div#sub{  
        position:absolute;  
        right:10px;  
        top:10px;  
    }  
  
    div.relative{  
        position:relative;  
        left:400px;  
        top:-20px;  
    }  
  
    div.static,div.fixed,div.absolute,div.relative{  
        width:300px;      
    }  
  
    div.static{  
        background-color:#bbb;  
        position:static;  
    }  
  
    div.fixed{  
        background-color:#ffc0cb;  
    }  
  
    div.absolute{  
        background-color:#b0c4de;  
    }  
  
    div.relative{  
        background-color:#ffe4e1;  
    }  
    -->  
</style>  
</head>  
<body>  
    <div id="demo">  
        <div class="static">static: 默認值。無特殊定位，對象遵循HTML定位規則 </div>  
        <div id="sub" class="absolute">absolute: 將對象從文檔流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。若是不存在這樣的父對象,則依據body對象。而其層疊經過z-index屬性定義 </div>  
        <div class="fixed">fixed:未支持。對象定位聽從絕對(absolute)方式。可是要遵照一些規範 </div>  
        <div class="relative">relative:對象不可層疊，但將依據 left,right,top,bottom 等屬性在正常文檔流中偏移位置 </div>  
    </div>  
</body>  
</html>

1. 真正的能理解CSS中的line-height，height與line-height
2. 真正理解"CSS選擇器的優先級"
3. 真正理解ViewState - part1
4. 真正理解 I love you !
5. EM算法真正理解
6. 【轉】真正理解NIO
7. 真正理解卷積
8. js閉包的真正理解
9. 關於java enum的真正理解
10. 真正理解 Node.js 的事件循環
更多相關文章...
• Spring中Bean的作用域 - Spring教程
• 現實生活中的 XML - XML 教程
• Scala 中文亂碼解決
• C# 中 foreach 遍歷的用法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。