DIVs的相對定位

我正在做codeacademy的CSS課程HTML &，我對定位有點困惑。DIVs的相對定位

我有了這個HTML文件

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    div { 
     position: relative; 
     display: inline-block; 
     height: 100px; 
     width: 100px; 
     border: 2px solid black; 
    } 

    div p { 
     position: relative; 
     margin-top: 40px; 
     font-size: 12px; 
    } 
    </style> 
</head> 
<body> 
    <div><p>Maxime</p></div> 
    <div><p>Killian</p></div> 
    <div><p></p></div> 
</body>

所以，如果我離開了這樣的代碼我沒有得到預期的結果。只有當我在第三個div中輸入第三個名字時，它的行爲也是我想要的。看看這張照片，你就知道我的意思了。

這裏發生了什麼？爲什麼段落的嵌套元素會改變父母的行爲？

來源

2015-10-30 Patrick Seume

我不知道爲什麼，並不能解釋，所以我不張貼作爲一個答案，但在你的CSS的'格p'如果你改變絕對似乎正確的顯示位置。 – Jon

-1

div { 
 
    position: relative; 
 
    display: table; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid black; 
 
    float: left; 
 
} 
 
div p { 
 
    position: relative; 
 
    margin-top: 0; 
 
    font-size: 12px; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div><p>Maxime</p></div> 
 
    <div><p>Killian</p></div> 
 
    <div><p>Lukas</p></div> 
 
</body>

來源

2015-10-30 18:26:42 365DaysMasti

只需添加一個FLOAT beavour段落

div p { 
    position: relative; 
    margin-top: 40px; 
    font-size: 12px; 

    float:left 
}

working feedle

來源

2015-10-30 18:43:00 holden

您需要設置CSS屬性vertical-align。上提到的定義（在簡要而言）的財產Mozilla Developer Network（您可以通過點擊鏈接閱讀更多）是如下：

垂直對齊CSS屬性指定的垂直對齊方式一個內聯或表格單元格框。

下面是上述的Mozilla Developer Network頁面的部分的屏幕截圖：

在該特定示例的上下文中，可以如下所示進行設置它的容器div上：

div { 
    vertical-align: top; 
}

這將使所有包含的元素正確對齊。見下文一個工作例如：

div { 
 
     position: relative; 
 
     display: inline-block; 
 
     height: 100px; 
 
     width: 100px; 
 
     border: 2px solid black; 
 
     vertical-align: top; /*Add this property*/ 
 
    } 
 
    div p { 
 
     position: relative; 
 
     margin-top: 40px; 
 
     font-size: 12px; 
 
     
 
    }

<div> 
 
    <p>Maxime</p> 
 
</div> 
 
<div> 
 
    <p>Killian</p> 
 
</div> 
 
<div> 
 
    <p></p> 
 
</div>

來源

2015-10-30 18:43:37

非常感謝！我試圖用某種方式來設計這個框架，這樣我就能理解了。由於div元素是p類的父母，我期望他們首先獲得一個職位。通過屬性'margin-top：40px;'段落應該從它們父母的頂部偏移40px。但實際上，div元素沒有固定的位置，如果我不給他們一個。這就是爲什麼他們的孩子可以改變立場。只有添加屬性'vertical-align：top;'div元素才能在畫布的頂部獲得固定的位置。這是正確的嗎？ –

只要改變從relative的position到absolute，一切都將被一字排開。

div p { 
    position: absolute; /*revised*/ 
    margin-top: 40px; 
    font-size: 12px; 
}

來源

2015-10-30 18:50:34 CDM

DIVs的相對定位

回答

相關問題