Необходимо чтобы блок (right-bar) накладывалась на блок (header).

GhostBZ` · April 13, 2013

Доброе всем время суток! Я в этом деле еще чайник, но хочу научиться этому ремеслу, изучаю верстку совсем недавно около месяца! Прошу подсказать, что именно я сделал не так! Теперь обратимся к самой проблеме, при верстке тестового задания столкнулся со следующей проблемой.

Необходимо чтобы блок(right-bar) накладывалась на header.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Allsoft</title>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<meta name="description" content="" />
<style type="text/css">
/*********************HEAD**************************/
.head{
overflow:hidden;
}
.head-top{
overflow:hidden;
margin:0 45px 20px 45px;
}
/*********************END HEAD**************************/

.right-bar{
float:right;
background: url(images/elka.png) bottom right no-repeat;
height:1297px;
width:319px;
position:absolute;
bottom:300px;
right:0;
}
</style>
</head>
<body>
<!————————- HEAD —————————->
<div class="head">
<div class="head-top">
<div class="logo">
<a href="#"><img src="images/logo.png" alt="AllSoft" /></a>
</div>
<div class="menu">
<ul>
<li><a href="#">О магазине</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Блог Allsoft</a></li>
</ul>
</div>
<div class="slogan">
<span>Новогодняя викторина <br/>
 от Allsoft.ru</span>
<h1>2010</h1>
</div>
</div>
</div> <!--head -->
<!————————- END HEAD ————————->
<div class="right-bar">
	 Текст
</div><!--right-bar -->
</body>

deadrash · April 13, 2013

При позиционировании блока через свойство position, необходимо указывать, относительно чего позиционировать элемент. Элемент всегда позиционируется относительно ближайшего предка (родителя) у которого задано свойство position.

В вашем случае у элемента с классом .right-bar всего два родителя - body и html, и не удного из них нет свойства position. В том случае когда ни одному элементу не задано свойство position считается что это свойство присвоено элементу html.

Кроме того, у вас элемент .right-bar отпозиционирован от низа страницы (bottom:300px;) 300 пикселей вверх от низа. Учитывая его высоту в height:1297px; вы можете его просто не увидеть. Позиционируйте от верха. Попробуйте top:0;

И к тому же, свойство float у элемента явно лишнее, так как position:absolute; вынимает элемент из потока.

p.s. Код лучше выкладывать вот таким образом http://jsbin.com/edezen/2/edit

Edited April 13, 2013 by deadrash

GhostBZ` · April 13, 2013

Спасибо за совет буду побывать!

Sign In

Необходимо чтобы блок (right-bar) накладывалась на блок (header).

Question

GhostBZ`

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

deadrash

Link to comment

Share on other sites

GhostBZ`

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information