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
Post a Comment