jquery - Is there a way to position divs on top of each other without using position absolute? -


so have structure(ignore russian text):

.sliders-container {      position: relative;  	width:100%;  	float:left;  }        .slider{  	position: relative;  	overflow: hidden;  	float: left;  }    #prev, #next{  	cursor: pointer;  	z-index: 100;  }      #prev{  	float:left !important;  }    #next{  	float:right !important;  }
<div class="sliders-container">      <a id="prev">prev</a>  	<a id="next">next</a>  	<div class="slider">  	    <p class="container-text">  		    <h1>join us</h1>  		</p>  		<p class="container-text">  		    <strong>Можно ли присоединиться?</strong> Да, конечно. Но сначала <a href="#">прочитайте наши базовые ожидания</a> — что мы ждем от каждого вступающего в utg.  		</p>  	</div>  	<div class="slider">  	    <p class="container-text">  			<h1>Преданность, участие и общение</h1>  		</p>  		<p class="container-text">Чем больше вы вкладываете в группу, тем больше получаете взамен. Если вы хотите играть с нами, вы должны быть готовы участвовать в жизни группы. Мёртвый груз никому не нужен. Сила группы зависит от активного участия членов сообщества. Если вы не отписываетесь в темах, когда вас просят, не участвуете в общении на форумах, в чате или не принимаете участия в играх, то вы являетесь никем для этой группы.  		</p>  	</div>  	<div class="slider">  		<p class="container-text">  			<h1>Зрелость</h1>  		</p>  		<p class="container-text">Вы должны быть готовы серьёзно отнестись к игре. Всем дуростям своё время и место, и вы должны уметь определять это время. Помимо этого, вы должны быть способны на адекватное, нормальное общение как в игре, так и вне её.  		</p>  	</div>  	<div class="slider">  		<p class="container-text">  			<h1>Желание учиться, совершенствоваться и быть частью команды</h1>  		</p>  		<p class="container-text">arma — это не та игра, где вы играете сами. Успех зависит от каждого. Чтобы быть эффективным в игре, вы должны знать свою роль, структуру командования, тактику и базовые процедуры, уметь общаться, работать с напарниками и использовать своё оружие. Если вы не командный игрок и не в состоянии выдержать того, что кто-то будет отдавать вам приказы, то можете дальше не читать. На данный момент накопилось много различной информации помимо БТП — начиная с этого текста, заканчивая обширной базой знаний по используемым модам. Вы должны быть готовы самостоятельно изучить всю необходимую информацию и разобраться в ней. Нам не нужны те, кто не способен уделить этому время.  		</p>  	</div>  	<div class="slider">  		<p class="container-text">  			<h1>Требования</h1>  		</p>  		<p>Следующие вещи являются <i>обязательными</i> без исключения:</p>  		<ul>  			<li>                  <a href="http://www.arma3.com/" target="_blank">Лицензионная версия arma3</a>. Естественно это также подразумевает установленный <a href="http://ru.wikipedia.org/wiki/steam">steam</a>, так как игра распростряняется только через него.              </li>  			<li>                  <a href="http://teamspeak.com/?page=downloads" target="_blank">Клиент teamspeak 3</a>. Он будет нужен для общения во время игр.              </li>  			<li>                  <a href="http://en.wikipedia.org/wiki/microphone" target="_blank">Микрофон</a>. Если у вас его нет, можете зайти в любой компьютерный магазин и купить любую самую дешёвую гарнитуру.              </li>  			<li>                  <a href="http://www.skype.com" target="_blank">skype клиент</a>. Он понадобится для быстрого и комфортного общения внутри группы.              </li>  		</ul>  	</div>  	<div class="slider">  		<p class="container-text">  			<h1>Что дальше?</h1>  		</p>  		<p class="container-text">  			<li>                  Прочитайте <a href="http://ttp2.tacticalgaming.kiev.ua/" target="_blank">базовые тактики и процедуры</a>.              </li>  			<li>                  Свяжитесь через skype с <strong>messiahukraine</strong>.               </li>  		</p>  	</div>  </div>

and have divs being positioned 1 after another. want this: want divs on top of each other(i use build jquery slider later), want without using position:absolute

.sliders-container {      position: relative;  	width:100%;  	float:left;  }        .slider{  	position: absolute;  	overflow: hidden;  	float: left;  }    #prev, #next{  	cursor: pointer;  	z-index: 100;  }      #prev{  	float:left !important;  }    #next{  	float:right !important;  }
<div class="sliders-container">  			<a id="prev">prev</a>  			<a id="next">next</a>  			<div class="slider">  				<p class="container-text">  					<h1>join us</h1>  				</p>  				<p class="container-text">  		  			<strong>Можно ли присоединиться?</strong> Да, конечно. Но сначала <a href="#">прочитайте наши базовые ожидания</a> — что мы ждем от каждого вступающего в utg.  				</p>  			</div>  			<div class="slider">  				<p class="container-text">  					<h1>Преданность, участие и общение</h1>  				</p>  				<p class="container-text">  		  			Чем больше вы вкладываете в группу, тем больше получаете взамен. Если вы хотите играть с нами, вы должны быть готовы участвовать в жизни группы. Мёртвый груз никому не нужен. Сила группы зависит от активного участия членов сообщества. Если вы не отписываетесь в темах, когда вас просят, не участвуете в общении на форумах, в чате или не принимаете участия в играх, то вы являетесь никем для этой группы.  				</p>  			</div>  			  			<div class="slider">  				<p class="container-text">  					<h1>Зрелость</h1>  				</p>  				<p class="container-text">  					Вы должны быть готовы серьёзно отнестись к игре. Всем дуростям своё время и место, и вы должны уметь определять это время. Помимо этого, вы должны быть способны на адекватное, нормальное общение как в игре, так и вне её.  				</p>  			</div>  			  			<div class="slider">  				<p class="container-text">  					<h1>Желание учиться, совершенствоваться и быть частью команды</h1>  				</p>  				<p class="container-text">arma — это не та игра, где вы играете сами. Успех зависит от каждого. Чтобы быть эффективным в игре, вы должны знать свою роль, структуру командования, тактику и базовые процедуры, уметь общаться, работать с напарниками и использовать своё оружие. Если вы не командный игрок и не в состоянии выдержать того, что кто-то будет отдавать вам приказы, то можете дальше не читать.  					На данный момент накопилось много различной информации помимо БТП — начиная с этого текста, заканчивая обширной базой знаний по используемым модам. Вы должны быть готовы самостоятельно изучить всю необходимую информацию и разобраться в ней. Нам не нужны те, кто не способен уделить этому время.  				</p>  			</div>  			  			<div class="slider">  				<p class="container-text">  					<h1>Требования</h1>  				</p>  				<p>Следующие вещи являются <i>обязательными</i> без исключения:</p>  				<ul>  				<li><a href="http://www.arma3.com/" target="_blank">Лицензионная версия arma3</a>. Естественно это также подразумевает установленный <a href="http://ru.wikipedia.org/wiki/steam">steam</a>, так как игра распростряняется только через него.</li>  				<li><a href="http://teamspeak.com/?page=downloads" target="_blank">Клиент teamspeak 3</a>. Он будет нужен для общения во время игр.</li>  				<li><a href="http://en.wikipedia.org/wiki/microphone" target="_blank">Микрофон</a>. Если у вас его нет, можете зайти в любой компьютерный магазин и купить любую самую дешёвую гарнитуру.</li>  				<li><a href="http://www.skype.com" target="_blank">skype клиент</a>. Он понадобится для быстрого и комфортного общения внутри группы.</li>  				</ul>  			</div>  			  			<div class="slider">  				<p class="container-text">  					<h1>Что дальше?</h1>  				</p>  				<p class="container-text">  					<li>Прочитайте <a href="http://ttp2.tacticalgaming.kiev.ua/" target="_blank">базовые тактики и процедуры</a>.</li>  					<li>Свяжитесь через skype с <strong>messiahukraine</strong>.</li>  				</p>  			</div>  		</div>

is possible without using position:absoulte? maybe jquery workaround?

you can using negative margins.

.slider{     float: left;     width: 100%;     margin-right: -100%; } 

check out jsfiddle

the benefit of using approach on position: absolute doesn't remove affected content blocks document’s normal flow.


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -