overflow: hidden и z-index

borus · October 20, 2011

У меня есть внешний div, который формирует белый фон для контента страницы, у которого было свойство overflow: hidden;

Вокруг него лежит текстурный background страницы. Логотип я разместил в headerе, который был внутри указанного дива с overflow: hidden;.

Попытался поднять лого с помощью position:relative и top: -100px, чтобы он оказался выше дива на текстурном фоне. Применял z-index и position подходящие для внешнего дива, чтобы лого вышло наверх, но пока не убрал overflow: hidden лого вверх не прошло.

Выходит overflow: hidden; главнее z-index?

Вот чего надо было добиться:

Это так и делается обычно, с помощью position:relative и top: -100px?

ceil100 · October 20, 2011

overflow:hidden

скрывает все что выходит за рамки контейнера.

и да оно главнее

можно просто создать контейнер за пределами внешнего дива, если overflow необходимо для вас

Edited October 20, 2011 by ceil100

borus · October 20, 2011

можно просто создать контейнер за пределами внешнего дива, если overflow необходимо для вас

а как тогда этот контейнер по координате X привязать к координате X контента? Моя страница центрируется, если уменьшить масштаб просмотра страницы лого может остаться где-то левее начала контента.

ceil100 · October 20, 2011

лого активное, или просто как картинка?

контейнер по ширине такой же как, нижележащий и ,тоже , центрирован

логотип как background: no-repeat

он встанет слева

если логотип выполняет роль ссылки, то немного сложнее

borus · October 20, 2011

лого активное, или просто как картинка?
контейнер по ширине такой же как, нижележащий и ,тоже , центрирован
логотип как background: no-repeat
он встанет слева
если логотип выполняет роль ссылки, то немного сложнее

да лого - это ссылка

ceil100 · October 20, 2011


#logo {width:900px;height:30px;margin:0 auto;background:url(logo.png) no-repeat;}

как то так,если не ссылка

если ссылка, то можно ее сделать блочным элементом с фоном этой картинкой, задать размер и сместить влево флоатом

внутри контейнера #logo


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
	<style type="text/css">
		#logo {width:900px;height:30px;margin:0 auto;}
		a{display:block;float:left;width:30px;height:30px;background:url(logo.png) no-repeat;}
	</style>
<body>
<div id="logo">
    <a href=""></a>
</div>
</body>
</html>

Edited October 20, 2011 by ceil100

borus · October 21, 2011


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
	<style type="text/css">
		#logo {width:900px;height:30px;margin:0 auto;}
		a{display:block;float:left;width:30px;height:30px;background:url(logo.png) no-repeat;}
	</style>
<body>
<div id="logo">
    <a href=""></a>
</div>
</body>
</html>

Вставил в <a href=""></a> текст(<a href="">ТЕКСТ</a>). Как его упорядочить по вертикали относительно центра фона логотипа?

Edited October 21, 2011 by borus

Searcher · October 21, 2011

vertical-align

+ немного подумать ))

Sign In

overflow: hidden и z-index

Question

borus

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

ceil100

Link to comment

Share on other sites

borus

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

borus

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

borus

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information