詳解css相對定位和絕對定位

時間 2019-11-06

標籤詳解 css 相對定位絕對欄目 CSS 简体版

原文原文鏈接

贊助我以寫出更好的文章，give me a cup of coffee?css

2017最新最全前端面試題

案例代碼1

<style type="text/css">
        .rel{
            border: 1px solid #ccc;
            height: 200px;
            width: 200px;
        }
        .rel1{
            position: relative;
            left: 100px;
            top:100px;
            background: blue;
            height: 50px;
            width: 50px;
        }
    </style>
<body>
    <div class="rel">
        <div class="rel1"></div>
    </div>
</body>

相對定位具備的屬性-1

1.若是設定TRBL，而且父級沒有設定position屬性，仍舊以父級的左上角爲原點進行定位(和absolute不一樣)

點擊下方result查看demo：
http://jsfiddle.net/trigkit/e...html

案例代碼2前端

<style type="text/css">
        .rel{
            position: absolute;
            border: 1px solid #ccc;
            height: 200px;
            width: 200px;
            
        }
        .rel1{
            position: relative;
            left: 100px;
            top:100px;
            background: blue;
            height: 50px;
            width: 50px;
        }
    </style>
<body>
    <div class="rel">
        <div class="rel1"></div>
    </div>
</body>

相對定位具備的屬性-2

2. 若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置由TRBL決 定(前半段和absolute同樣)。若是父級有Padding屬性，那麼就之內容區域的左上角爲原點，進行定位(後半段和absolute不一樣)。

http://jsfiddle.net/trigkit/e...git

以上兩點點能夠總結出，相對定位老是以父級左上角爲原點進行定位的，若是父級不存在，則以瀏覽器左上角進行定位。

相對定位的規律

1.使用相對定位的盒子，會相對於它本來的位置，經過偏移指定的距離，到達新的位置
2.使用相對定位的盒子仍在標準流中（會佔據原來的位置），它對父親和兄弟盒子都沒有任何影響

絕對定位

案例代碼1github

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        .abs{
            border: 1px solid #ccc;
            height: 200px;
            width: 200px;
        }
        .abs-1{
            position: absolute;
            left: 100px;
            top:100px;
            background: blue;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="abs">
        <div class="abs-1"></div>
    </div>
</body>

absolute具備的屬性-1

1.若是設定TRBL，而且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由TRBL決定。

http://jsfiddle.net/trigkit/e...面試

案例代碼2瀏覽器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        .abs{
            position: absolute;
            border: 1px solid #ccc;
            height: 200px;
            width: 200px;
        }
        .abs-1{
            position: absolute;
            left: 100px;
            top:100px;
            background: blue;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="abs">
        <div class="abs-1"></div>
    </div>
</body>

absolute具備的屬性-2：

2.若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置由TRBL決 定。即便父級有Padding屬性，對其也不起做用，說簡單點就是：它只堅持一點，就以父級左上角爲原點進行定位，父級的padding對其根本沒有影 響。

點擊下方result 查看demo工具

http://jsfiddle.net/trigkit/e...ui

以上兩點能夠總結出:.net

若想把一個定位屬性爲absolute的元素定位於其父級元素內

，必須知足兩個條件：

設定TRBL
父級設定Position屬性

絕對定位的規律

1.使用絕對定位的盒子以它的「最近」的一個「已經定位」的「祖先元素」爲基準進行定位。若是沒有已經定位的祖先元素，那麼會以瀏覽器窗口爲基準進行定位

2.絕對定位的框從標準流中脫離，這意味着他們對其後的兄弟盒子的定位沒有影響，其餘的盒子好像就好像這個盒子不存在同樣

（1）所謂「已經定位」元素的含義是，position屬性被設置。

以上形成的細微誤差你們能夠經過QQ截圖工具查看，到方框的應該是100像素，到瀏覽器最邊緣的應該是110像素。

相關標籤/搜索

每日一句

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