Ссылка не появляется в классе div, а за ее пределами - PullRequest
Новая
       1

Ссылка не появляется в классе div, а за ее пределами

0 голосов
/ 26 августа 2011

Я пытаюсь воссоздать несколько элементов, которые я видел в Интернете, и я использую Element Inspector, но не могу понять, почему этот элемент href загружается за пределы моего класса modalHeader.

Вот некоторый HTML: 

<div id="modalContainer">
<div class="fakeModal">

    <div class="modalHeader"> 

        <h2>Fake Modal Heading</h2>
        <a href="#" class="close">x</a>

    </div> <!-- end modalHeader -->

</div> <!-- End fakeModal -->

И соответствующий CSS (с использованием Меньше ) 

#modalContainer {
width: 700px;
height: 250px;
background: gray;
padding: 1px; }

.fakeModal {
    width: 500px;
    height: 150px;
    margin: 50px auto 50px auto;
    border-radius: 3px;
    //border: 3px solid black;
    background: white;
}

.modalHeader {
h2 {
    background: @dullGray;
    border-bottom: solid 1px #EEE; //This makes so much of a difference!!!!
    border-radius: 3px 3px 0 0;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    padding: 9px 15px;
}

a.close{
    position: absolute;
    top: 10px;
    right: 10px;
    color: gray;
    text-decoration: none;
    font-size: 18px;
}

a.close:hover {
    text-decoration: underline;
    color: gray;
    }
}

Может кто-нибудь понять, почемух не рендерится в горизонтальном поле, которое я определил в modalHeader?

Ответы [ 3 ]

2 голосов
/ 26 августа 2011

@ Zack; вы присваиваете position: absolute; своему тегу a, поэтому присваиваете position: relative; родительскому тегу div modalHeader, который вам подходит.

CSS: 

.modalHeader {position: relative;}

Подробнее читайте в этой статье http://css -tricks.com / 791-absolute-позиционирование-внутри-относительное-позиционирование /

2 голосов
/ 26 августа 2011

Вы установили ссылку на абсолютную позицию, а не относительно ее родительского контейнера. Снимите позицию и измените верхнюю и правую границу.

0 голосов
/ 26 августа 2011

Абсолютная позиция всегда относится к элементу, над которым расположен относительный или абсолютный.Если его нет, это относится к телу.Попробуйте изменить position: absolute; на position: relative; или определить modalHeader как position: relative;.

...