Перекрывающаяся проблема - PullRequest
Новая
       5

Перекрывающаяся проблема

0 голосов
/ 07 декабря 2011

У меня проблема с перекрывающимися элементами внутри плавающего элемента div.Я, должно быть, неправильно применял z-index, но я пробовал несколько разных вещей, и я не могу заставить эти два элемента перекрываться.У меня есть следующий код (примечание: divLink и topIconNew div на самом деле pngs):

http://jsfiddle.net/jhacks/neskB/7/

HTML: 

<div class="topIcon">          

<div class="topIconNew"></div>
<div class="topLink"></div>

</div>

CSS: 

.topIcon{

border:1px solid black;
background-color:gray;
width:28px;
height:40px;
float:right;
position:relative;
}

.topLink{
background-color:green;
width:16px;
height:16px;
position:absolute;
    top:14px;
    left:6px;
    z-index;300;
 }    

.topIconNew{
background-color:red;
margin:30px 0px 0px 18px;
width:10px;
height:10px;
position:relative;
    z-index:350;
cursor:pointer;
}

HTML-код для pngs (если это имеет значение): 

<a href="xxxxx.html"><img src="xxxxx.png"> </img> </a>

EDIT ** Я сделал это!В заключение.Спасибо за помощь ... увидев ваш код, я увидел использование абсолютного и относительного вместе.Теперь у меня есть лучшее понимание использования этих вещей, и теперь вместо позиционирования вещей с отступами / полями я использую (и правильно, я бы сказал, правильно) позиционирование.Я чувствую себя глупо за то, что я делал.

1 Ответ

1 голос
/ 07 декабря 2011

Спасибо за правки, теперь ваш вопрос стал намного понятнее. Я думаю, что это удовлетворит ваш вопрос.

http://jsfiddle.net/neskB/26/

Хорошо, теперь это имеет больше смысла.

  1. У вас есть серый div, всплывший справа
  2. Вы хотите центрировать зеленый div в этом
  3. Вы хотите красный div в правом нижнем углу зеленого div

Сначала я бы изменил вашу HTML-структуру на эту. 

<div class="topIcon">                 
    <div class="topLink">
        <div class="topIconNew"></div>
    </div>                    
</div>

Ссылка будет расположена относительно родительского значка. New будет располагаться относительно его родителя, Link. 

/* set topIcon to relative so that its child will be positioned relative to it */
.topIcon{     position: relative;   }

/* topLink is absolute positioned. We use top/left of 50% and negative margins to automatically center it */
.topLink{
    position: absolute;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    left:50%;
    top:50%; 
}

/* New is positioned in bottom right of its parent */
.topIconNew{
    position:absolute;
    bottom:0px;
    right:0px;
}
...