Сложенное содержимое, неправильно с скрытым переполнением

Отредактировано, чтобы показать текущий код и добавить html: Я все еще изучаю CSS, и у меня есть небольшая проблема. У меня есть изображение заголовка поверх страницы. Наложение изображения У меня есть панель заголовка с кнопкой «домой».Сложенное содержимое, неправильно с скрытым переполнением

#header {height:170px; background-color:#f5fdfb; display:block; overflow:hidden; position:relative;} 

#header_bild { 
padding-top:0px; 
height:170px; 
z-index:5; 
} 

#header_bar { 
background-image:url(header_bar.png); 
position:absolute; 
top:0px; 
left:0px; 
width:151px; 
height:31px; 
z-index:10 
}

Но я хочу, чтобы люди в CMS, чтобы иметь возможность загрузить изображение заголовка, который слишком велик, и он будет автоматически обрезана. Я думал, что смогу сделать это, добавив переполнение: скрытый в тег заголовка. И это работает. Но как только я добавляю переполнение: hidden, панель заголовка внезапно стоит за заголовком, а не поверх нее, где она принадлежит. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Материал на CMS на самом деле не был закодирован мной. Я только редактирую файлы CSS. Так что я могу только показать вам HTML, что я могу видеть при просмотре исходного файла на сайте:

<body> 
<div id="siteborder"> 
<div id="container"> 
<div id="header"> 
<div id="header_bar">&nbsp;</div> 
<div id="header_img"> 
<img src="./files/header_seed.jpg" border="0" title="" alt=""></div> 

</div> 
<div id="logo"><a href="http://www.thispage.net"><img src="files/dummy.gif" width="151" height="30"></a></div> 

<div id="linie_header"><img src="files/line_header.png" width="992" height="2"></div> 
</div><!-- header end -->

источник

2014-01-24 user3233917

Можете ли вы добавить образец HTML тоже? – RacerNerd

Не могли бы вы добавить часть HTML или создать jsFiddle? – Roman

Вы должны рассмотреть возможность использования z-index в вашем CSS, чтобы явно указать, что должно быть «сверху» и что должно быть "за". Существует plenty хорошей информации. z-index помещает объекты с более высоким значением «сверху» объектов с более низкими значениями. По умолчанию, если не определено является auto, что означает, что он принимает это значение от своего родителя, который является (как правило) 0. <html> тегов по умолчанию в z-index 0, поэтому следует, что вложенные значения по умолчанию также будет 0.

.thingone { z-index:10;} 
.thingtwo { z-index:5;} 
.thingthree { }

В этом примере, <div class="thingone"></div> будет «сверху» и другими, и <div class="thingthree"></div> будет «под» другими, так как он не определен, и поэтому по умолчанию auto (The z-index родителя, если вложенный, обычно-). Таким образом, вы должны добавить z-index:10 (например) для конкретного объекта, который вы хотите быть на вершине (если изображение, которое вы хотите «сверху» фактически определяется header_img):

#header_img { 
    padding-top:0px; 
    height:170px; 
    position:relative; 
    z-index:10; 
} 
#header_bar { 
    background-image:url(header_bar.png); 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:151px; 
    height:31px; 
    z-index:20; 
}

Как отметил Hilgaran в комментарии ниже, вам необходимо явно указать правило position для объекта, который вы пытаетесь сделать z-index. По умолчанию position - relative для объектов, не вложенных под родителями с альтернативным position s, поэтому укажите его явно, чтобы сделать функцию z-index.

источник

2014-01-24 23:54:44 L0j1k

Просто имейте в виду, что атрибут позиции «относительный», «абсолютный» или «фиксированный» должен сопровождать z-индекс. – Hiigaran

Спасибо. Я добавил z-index сейчас, но unfortunatel ничего не меняется. Я хочу, чтобы header_bar был сверху, а header_img - ниже. Ошибка заключается в том, что я добавляю переполнение: скрытое к тегу заголовка. Но я не знаю почему. – user3233917

Можете ли вы изменить свой вопрос, чтобы включить скрипку, содержащую все соответствующие коды? Нам нужны как ваши HTML, так и CSS, чтобы помочь вам, но, пожалуйста, не вставляйте все в свои файлы, иначе это просто затрудняет просмотр. – Hiigaran

Сложенное содержимое, неправильно с скрытым переполнением

ответ

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