絕對定位div中的文本重疊

在下面的代碼片段中，div元素（.main> div）相對定位並向左浮動。絕對定位div中的文本重疊

由於相對定位，div元素（.main> div）彼此相鄰放置。

跨度元件是div元素下（。主要> DIV>跨度）

跨度元件被定位絕對以便居中文本（食品，健康）。

但我面臨的問題是文本重疊。

根據我的理解，絕對定位的元素（.main> div> span）應該相對於其相對或絕對定位的容器（.main> div）進行定位。

那麼爲什麼元素重疊。不僅是跨度元素，還有div元素（相對定位）重疊。

我試圖自己解決這個問題，但無法弄清楚問題所在。

我搜索了類似的StackOverflow問題，但他們沒有提供解決方案。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.main { 
 
    height: 5%; 
 
    border: 1px solid thistle; 
 
} 
 

 
.main > div { 
 
    position: relative; 
 
    float: left; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
} 
 

 

 
.main > div > span { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
    <div><span>Food</span></div> 
 
    <div><span>Health</span></div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-03-07 vrn

你的理解是正確的，但在這種情況下div的是浮動的，他們會坍縮成的寬度爲0，因爲沒有div的「S有任何正常流動的內容，因此你絕對span的重疊。

在下面的示例中，我給出了div的寬度，現在您可以看到它的工作方式如何。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.main { 
 
    height: 5%; 
 
    border: 1px solid thistle; 
 
} 
 

 
.main > div { 
 
    position: relative; 
 
    float: left; 
 
    height: 100%; 
 
    border: 1px solid black; 
 
    width: 100px;     /* added a width */ 
 
} 
 

 

 
.main > div > span { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
    <div><span>Food</span></div> 
 
    <div><span>Health</span></div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-03-07 16:09:12 LGSon

的原因是，每個position:absolute;元素從DOM的原生流中除去，並定位絕對是他們的父元素。由於它們具有相同的定位，所以它們被放置在彼此的頂部。使用position:relative將元素相對於其在DOM中的原生位置進行定位。

來源

2016-03-07 15:59:11

的DOM沒有「本地流量」。您所指的是CSS定位元素的「正常流程」，其中DOM不會超出元素的文檔節點順序。 https://drafts.csswg.org/css2/visuren.html#normal-flow – Rob

絕對定位div中的文本重疊

回答

相關問題