не понимаю логику позиционирования

челХ · May 19, 2010

Подскажите, как выровнять блок Text с надписью Login input и блок sr с надписью Sidebar , чтобы они находились на одном уровне по оси Y

, чтобы sidebar не заходил на большой серый блок. Большой серый блок , блок сайдьара и блок текста имеют одинаковый уровень в html, но почему-то позиционируются по разному. недавно посмотрел видеокурсы по верстке css, но так и не догнал логику позиционирования блоков браузерами. Вот код HTML В

вот код html Код

<!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>
	  <title></title>
	 <meta http-equiv="content-type"  content="text/html; charset=utf-8" />
	 <meta name="title"  content="" />
	 <meta name="keywords" content="" />
	  <meta name="description" content="" />
	 <link  rel="stylesheet" href="style.css" type="text/css" media="screen" />
	  <!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css"  type="text/css" media="screen" /><![endif]-->
 </head>

 <body>

 <div id="wrapper">

	  <div id="header">
 Header: 
	 </div><!--  #header-->

	 <div id="text">
						Login  input.
		 </div><!--#text -->


		  <div id="sr">
 Sidebar: 
		 </div><!-- #sr  -->

	 <div id="middle">

  <!--		<div  id="container">containerrrrrrrrrrrrrrrrrrrrrrrrrrrr
			  <div  id="content">
 Content: 
			 </div><!--  #content-->							   
		  </div><!--  #container-->								  -->


	  </div><!-- #middle-->

 </div><!-- #wrapper  -->

 <div id="footer">
 Footer:  
  </div><!-- #footer -->

 </body>
  </html>

вот код css (там много лишнего)

ссссКод

* {
  //border: 1px black solid;
	 margin: 2px;
	 padding: 4px;
  }
 html {height: 100%}
 body {
	 font: 12px/18px Arial,  Tahoma, Verdana, sans-serif;
	 height: 100%;
 }
 a {
	  color: blue;
	 outline: none;
	 text-decoration: underline;
  }
 a:hover {
	 text-decoration: none;
 }

 img {

 }
 input {vertical-align: middle}
 #wrapper {
	 width:  100%;
 //	max-width: 1900px;
 //	margin: 3px auto 3px auto;
  //	min-height: 100%;
 //	height: auto !important;
	  height: 100%;
 background: #1FF019;
 }


 /* Header
   —————————————————————————--*/
  #header {


	 height: 60px;
	 background-image:  url('img/header.JPG');
 //background-repeat: no-repeat;

 }


 #text {
 //	float: right;
	   width: 500px;
  background: #999019;
 }

 /* Middle
  —————————————————————————--*/
  #middle {
	 width: 100%;

	 height: 100%;
  background: #9F8085;
 }
 #middle:after {
 //	content: '.';
  //	display: block;
 //	clear: both;
 //	visibility:  hidden;
 //	height: 0px;
 }
 #container {
	 width:  100%;
	 float: left;
	 overflow: hidden;
 height: 100%;
  background: #BFF11E;
 }
 #content {
		 background:  #B0008E;

 }

 /* Sidebar Right
  —————————————————————————--*/
  #sr {
 //border: 1px solid black;
	 float: right;

	  width: 450px;

	 background: #FFACAA;
  //position:relative;
 //top:0px;
 //right:0px;
 }


  /* Footer
  —————————————————————————--*/
  #footer {
 width: 100%;

 //	min-width: 1000px;
  //	max-width: 1900px;
	 height: 30px;
	 background:  #BFF08E;
 }

sigma77 · May 19, 2010

челХ,

По умолчанию, они и так должны выставится друг под другом, без всяких стилей. Либо покажите картинку того, что хотите получить.

И что у вас за двойные слэши перед некоторыми свойствами?

челХ · May 19, 2010

картинки вот - это как есть

челХ,
По умолчанию, они и так должны выставится друг под другом, без всяких стилей. Либо покажите картинку того, что хотите получить.
И что у вас за двойные слэши перед некоторыми свойствами?

вот как надо

челХ,
По умолчанию, они и так должны выставится друг под другом, без всяких стилей. Либо покажите картинку того, что хотите получить.
И что у вас за двойные слэши перед некоторыми свойствами?

слеши нужны, чтобы закомментировать как в программировании, чтобы параметр не выполнялся. в общем, на моих картинках есть 3 блока одного уровня в DOM - это коричневый, розовый и серый, вот я не понимаю, почему они равнозначны, но при этом розовый залазит на серый, а серый на зеленый или зеленый на сервый не налазят. в общем, я не понимаю, как вооще позиционирование осуществляется. и еще, это только у меня на этом сайте когда пишешь пост вместо нормального поля ввода какое-то идиотское, что нельзя ничего стереть и отредактировать? поэтому я и пишу такие кривые посты по 3 штуки на 1 вопрос.

челХ,
По умолчанию, они и так должны выставится друг под другом, без всяких стилей. Либо покажите картинку того, что хотите получить.
И что у вас за двойные слэши перед некоторыми свойствами?

sigma77 · May 19, 2010

Это нужно?

<!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" xml:lang="en" lang="en">
  <head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="#" media="#" />
	<style type="text/css">
	* {margin: 0; padding: 0}
	  #header {background: red;}
	  #login {float: left; width: 50%; background: olive;}
	  #sidebar {overflow: hidden; background: fuchsia;}
	  #text {background: gray;}
	</style>	
  </head>
  <body>
	<div id="header">Header</div>
	<div id="login">Login input</div>
	<div id="sidebar">Sidebar</div>
	<div id="text">Text</div>				 
  </body>
</html>

челХ · May 19, 2010

Это нужно?

да , типа того. только я не понимаю, почему у вас они выстроились нормально, а у меня нет. можете объяснить?

челХ · May 19, 2010

Это нужно?

хотя мне надо, чтобы по клику по блоку sidebar он вытягивался вниз и перекрывал блок Text, а блок Text не должен никуда сдвигаться. вот я добавил css абсолютную позицию для блока text и z -индекс для блоков text и sidebar, но почему-то z-индекс вообще никак не влияет на порядок слоев (при любом z-индексе у меня блок text выше чем блок sidebar).

<!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" xml:lang="en" lang="en">
  <head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="#" media="#" />
	<style type="text/css">
	* {margin: 0; padding: 0;}
	  #header {background: red;}
	  #login {float: left; width: 50%; background: olive;}
	  #sidebar {overflow: hidden; background: fuchsia;height: 300px;z-index:2;}
	  #text {background: gray;position:absolute; top:80px;z-index:1;}
	</style>	
  </head>
  <body>
	<div id="header">Header</div>
	<div id="login">Login input</div>
	<div id="sidebar">Sidebar</div>
	<div id="text">Text atztrahrrbhlgjkwhnlrtbhtqhnblkbatztrahrrbhlgjkwhnlrtbhtqhnblkbqatztrahrrbhlgjkwh
nlrtbhtqhnblkbqq</div>				
  </body>
</html>

Как сделать, чтобы блок text был перекрыт блоком sidebar ?

Edited May 19, 2010 by челХ

sigma77 · May 19, 2010

хотя мне надо, чтобы по клику по блоку sidebar он вытягивался вниз и перекрывал блок Text, а блок Text не должен никуда сдвигаться.

Если по клику, то скорее всего без JavaScript не обойтись.

вот я добавил css абсолютную позицию для блока text и z -индекс для блоков text и sidebar, но почему-то z-индекс вообще никак не влияет на порядок слоев (при любом z-индексе у меня блок text выше чем блок sidebar).

z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.

челХ · May 19, 2010

Если по клику, то скорее всего без JavaScript не обойтись.

я это знаю, но яваскрипт же должен изменять свойства css ? а как сделать в самом css , чтобы блок sidebar вытягивался вниз и перекрывал блок Text?

sigma77 · May 19, 2010

челХ,

Как вариант изменение высоты блока. position: absolute и z-index выше, чем у текста

челХ · May 19, 2010

sigma77 почему в данном случае sidebar лежит не вплотную с верхней границей?

<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="#" media="#" />
<style type="text/css">
* {margin: 0; padding: 0;}
#header {background: red;width:100px;}
#login {float: left; width: 50%; background: olive;}
#sidebar {overflow: hidden; background: fuchsia;height: 300px;z-index:2;position:absolute;right:10px;width: 450px;}
#text {background: gray;position:absolute; top:80px;z-index:1;height:250px}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="login">Login input</div>
<div id="sidebar">Sidebar</div>
<div id="text">Text atztrahrrbhlgjkwhnlrtbhtqhnblkbatztrahrrbhlgjkwhnlrtbhtqhnblkbqatztrahrrbhlgjkwh
nlrtbhtqhnblkbqq</div>
</body>
</html>

sigma77 · May 19, 2010

челХ,

добавь top: 0, overflow: hidden в данном случае можно убрать.

челХ · May 19, 2010

а разве top: 0 не должно стоять по-умолчанию?

sigma77 · May 20, 2010

а разве top: 0 не должно стоять по-умолчанию?

Нет.

http://www.w3.org/TR/CSS21/visuren.html#propdef-top

http://htmlbook.ru/css/top.html

челХ · May 20, 2010

а как привязать большой блок к футеру? чтобы при изменении размера окна не появлялось полос прокрутки.

Sign In

не понимаю логику позиционирования

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information