Текст в абсолютно позиционированном div перекрывается

В приведенном ниже фрагменте кода элементы div (.main> div) расположены относительно друг от друга и перемещаются слева.Текст в абсолютно позиционированном div перекрывается

Из-за относительного позиционирования элементы div (.main> div) расположены рядом друг с другом.

элементы отсчитываются под элементами DIV (.main> DIV> диапазон)

Пролет элементы расположены абсолютно так, чтобы центрировать текст (питание, здоровье).

Но проблема, с которой я сталкиваюсь, заключается в том, что текст перекрывается.

По моему пониманию, абсолютно позиционированный элемент (.main> div> span) должен располагаться относительно его относительно или абсолютно расположенного контейнера (.main> div).

Так почему же элементы перекрываются. Не только элементы span, но и элементы 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 «s сплавляется, они будут разрушаться в ширину 0, так как ни один из div» s имеет любое нормальное сыпучее содержание, следовательно, перекрытия ваших абсолютные span «S ,

В приведенном ниже образце я дал ширину 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 перекрывается

ответ

Смежные вопросы