Проблема с CSS, на позиции: абсолютная - PullRequest
Новая
       4

Проблема с CSS, на позиции: абсолютная

0 голосов
/ 05 августа 2010

Я не знаю, какую позицию я должен объявить, если у родителя есть позиция: абсолютная.

Вот код, 

<div id="new_map">
                    <div id="map_nbc_pop">
                        <div class="nm_bubbletop1"></div>
                        <div id="nm_bubblebg">                          
                            <ul class="nm_left">
                            <li><a href="#">Chetwynd</a></li>
                                <li><a href="#">Fort St James</a></li>
                                <li><a href="#">Fort St John</a></li>
                            </ul>
                            <ul class="nm_right">
                            <li><a href="#">McBride</a></li>
                                <li><a href="#">Prince George</a></li>
                                <li><a href="#">Prince Rupert</a></li>
                            </ul>
                        </div>
                        <div class="nm_bubblebelow1"></div>
                    </div>
</div>

вот пример CSS, я просто удаляю другой для просмотра ... 

#new_map { position: static }
#map_nbc_pop { position: absolute }

Проблема для меня в .nm_bubbletop1, #nm_bubblebg, .nm_bubblebelow1 Какую позицию я буду использовать? Потому что они не наложены должным образом на браузер. 

<div class="nm_bubblebelow1"></div>
<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg"></div>

То, что я хочу, это, 

<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg"></div>
<div class="nm_bubblebelow1"></div>

Спасибо!

Ответы [ 3 ]

1 голос
/ 05 августа 2010

Если вам нужно изменить способ отображения <div> без изменения кода, то позиция: абсолютная - ваш лучший вариант: 

.nm_bubbletop1, #nm_bubblebg, .nm_bubblebelow1 [
   position: absolute;
   left: 0;
}

.nm_bubbletop1 {
   top: 0;     
}

#nm_bubblebg {
   top: 100px; /* this is .nm_bubbletop1's height */     
}

.nm_bubblebelow1 {
   top: 200px;  /* this is .nm_bubbletop1's height + #nm_bubblebg's  height */    
}

Как говорится, это хакерство.Если в любом случае вы можете просто заказать их так, как вы хотите в HTML, это облегчит вашу жизнь.

0 голосов
/ 06 августа 2010

Это то, что вы имеете в виду, я думаю> 

<div id="new_map">
                <div id="map_nbc_pop">
                    <div class="nm_bubbletop1"></div> 
                    <div id="nm_bubblebg">
                        <ul class="nm_left" >
                        <li><a href="#">Chetwynd</a></li>
                            <li><a href="#">Fort St James</a></li>
                            <li><a href="#">Fort St John</a></li>
                        </ul>
                        <ul class="nm_right">
                        <li><a href="#">McBride</a></li>
                            <li><a href="#">Prince George</a></li>
                            <li><a href="#">Prince Rupert</a></li>
                        </ul>
                    </div>
                    <div class="nm_bubblebelow1"></div>
                </div>

1004 *

и css: 

#new_map { position: static }
#map_nbc_pop { position: absolute }
.nm_bubbletop1, .nm_bubblebelow1 {  position:absolute; height:15px; background-color:#ccc; width:100%; }
.nm_bubbletop1 { top:0px; }
.nm_bubblebelow1 { bottom:0px; }
#nm_bubblebg { margin:15px 0px; }

Это делает меню гибким, а верх и низ всегда на месте. Край середины делает его легко соединяемым.

Скрипка: http://jsfiddle.net/fmDhn/1/

0 голосов
/ 05 августа 2010

если вы дадите #new_map позицию relative, а затем дочерние элементы, для которых вы хотите расположить абсолютную позицию, это сделает положение этих дочерних элементов относительно родителя #new_map, т. Е. Ваше начало координат будетверхний левый угол #new_map.Затем вы можете изменить порядок наложения (z-index) или расположение (сверху, слева, справа, снизу) дочерних элементов в зависимости от того, где #new_map.

...