CSS 在relative absolute定位布局裡通過-margin定位技巧

06-01

今天看到一段有意思的代碼，是一個通過border畫圖標的代碼，而在代碼中，我發現他是通過magin-left和margin-top為負數來完成定位的。但是我發現在父級是absolute 子級relative時是並不是margin的任何一個方向都會起作用，於是我深究了一下。

結論：當我們設置relative定位的元素的位置時必須使用right/left，bottom/top，此時我們用的是哪一方向，我們的margin也就會在那個方向起作用。

<!DOCTYPE html>

<html>

<head>

<style>

.add{

display: inline-block;

width: 76px;height: 76px;

border: dashed 2px;

text-indent: -12em;

transform: color .25s;

position: relative;

}

.add:hover{

color: #FF0000;

}

.add::before, .add::after {

content: "";

position: absolute;

top: 100%;

left: 100%;

}

.add::after{

width: 20px;

border-top:4px solid;

margin: -40px 0 0 -48px;

}

.add::before{

height: 20px;

border-left:4px solid;

margin: -48px 0 0 -40px;

}

</style>

</head>

<body>

</body>

</html>

這是那個圖標的源代碼。

首先這段代碼中，內部relative定位的兩個元素都未對位置進行設置，也就是left:0;top:0;這時下面也恰好是margin-left 和 margin-top起了作用。

用簡單的代碼分析

</div>

.father{

width: 300px;height: 200px;

background-color:#CCCCCC ;

position: relative;

margin: 100px auto;

}

.son{

width: 50px;height: 50px;

border: 2px solid red;

position: absolute;

left:0px;

top:0px;

margin-left: -100px;

margin-top: -50px;

}

這時可見到子代元素在左上方偏移，也是margin-left 和 margin-top 起了作用，但是如果設置的時margin-right或是margin-bottom對子代元素就完全不起作用

margin-right: 100px;

margin-bottom: 50px;

或是

margin-right: -100px;

margin-bottom: -50px;

然後我們設置right:0;bottom:0;

在這種情況下我們設置

margin-right: -100px;

margin-bottom: -50px;

此時在right和bottom方向上的margin起了作用

而在left跟top方向上就不起作用

margin-left: 50px;

margin-top: -50px;

這時我們可能回想，這是因為位置上的權重。而實際僅僅是跟我們設置的元素有關。下面我們同時通過left、top和bottom、right將子元素設置到父元素中間。

第一組： left: 125px;

top: 75px;

第二組： right: 125px;

bottom: 75px;

當我們使用第一組數據時

我們設置

margin-left: 50px;

margin-top: 50px;

就完全不起作用，而使用

margin-right: 50px;

margin-bottom: 50px;

就會起作用

當我們使用第二組數據時

我們設置

margin-left: 50px;

margin-top: 50px;

就會起作用，而使用

margin-right: 50px;

margin-bottom: 50px;

就完全不會起作用

此文章僅僅是小白在學習時發現的問題，希望得到指導。