Использование абсолютного / относительного позиционирования с css псевдоэлементами - PullRequest
Новая
       111

Использование абсолютного / относительного позиционирования с css псевдоэлементами

0 голосов
/ 20 марта 2020

Новый для css здесь. У меня есть речевой пузырь ниже, и я хочу, чтобы тег span был расположен относительно divcontainer. Как это сделать, не влияя на отображение псевдоэлемента?

HTML (пример): 

<div id = 'divcontainer'> 
  <span> </span>
</div>

CSS: 

#divcontainer
{
    position: relative;
}
span
{
    position: relative;                /* I want the span tag to be positioned relative to the div.*/
    left: 18px;
    top: -15px;

    white-space: nowrap;
    font-size: 12px;
    background: white;
    border: 1px solid white;
    border-radius: 7px;
    padding-bottom: 5px;
    visibility: hidden;

}

span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 0;
    height: 0;
    border: 18px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
    margin-bottom: -10px;
}

Любой рука очень благодарна!

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Вы можете применить position: absolute; и к дочернему элементу (span) и к его псевдоэлементу. Положение обоих будет относительно относительно расположенного родительского элемента и поэтому также будет относительно друг друга. 

#divcontainer
{
    position: relative;
    width: 200px;
    height: 200px;
    background: #ddd;
}
span
{
    position: absolute;                
    left: 30px;
    top: 85px;
    white-space: nowrap;
    font-size: 12px;
    background: white;
    border: 1px solid white;
    border-radius: 7px;
    padding-bottom: 5px;

}

span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 0;
    height: 0;
    border: 18px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
    margin-bottom: -15px;
}
<div id = 'divcontainer'> 
  <span>THE SPAN ELEMENT</span>
</div>
0 голосов
/ 20 марта 2020

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

#divcontainer {
    position: relative;
}
span {
    position: absolute;             
    left: 18px;
    top: -15px;
}

Если элемент имеет абсолютное позиционирование , элемент позиционируется абсолютно по отношению к своему первому позиционированному родителю. В вашем случае #divcontainer является первым позиционированным родителем.

...