CSS / HTML: позиция div не остается неизменной, если она ниже «абсолютного» div - PullRequest
Новая
       48

CSS / HTML: позиция div не остается неизменной, если она ниже «абсолютного» div

0 голосов
/ 22 февраля 2019

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

Это работает, если я помещаю закрепленный div над центральным div и устанавливаю центральный divдо нормального значения, однако затем центральный делитель сдвигается вниз, чего я пытаюсь избежать, устанавливая его в абсолютное значение.

Fiddle: http://jsfiddle.net/fqz6gej9/2/

html: 

<div id="main">
(stuff here)
</div>
<div id="options">
  This should be sticky
</div>

css: 

body
{
 background-color:gray;
}

div
{
  background-color:white;
}

#main
{
    position: absolute;
    background-color: #FFF;
    color: black;
    width: 50%;
 margin-left: 20%;
}

#options
{
    position: sticky;
    top: 0;
    width: 15%;
}

Это вся информация, которую я могу представить, но дайте мне знать, если мне нужно добавить еще.

Ответы [ 3 ]

0 голосов
/ 22 февраля 2019

Проблема в том, что, устанавливая элемент равным position:absolute, вы удаляете его из потока и делаете высоту тела равной высоте элемента жесткости, таким образом у вас не будет никакого поведения прилипания

Вот еще одна идея без использования абсолюта, где вы можете положиться на flexbox для создания макета: 

body {
  background-color: gray;
  display: flex;
  align-items: flex-start;
}

div {
  background-color: white;
}

#main {
  background-color: #FFF;
  color: black;
  width: 50%;
  margin-left: 10%; /*(100% - 50%)/2 - 15%*/
}

#options {
  position: sticky;
  top: 0;
  width: 15%;
  order: -1;
}
<div id="main">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis
  in faucibus. Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis
  posuere. Aliquam ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus.
  Duis eget augue lectus. Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis. Lorem ipsum dolor
  sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis posuere. Aliquam
  ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus. Duis eget augue lectus.
  Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis.
</div>
<div id="options">
  This should be sticky
</div>
0 голосов
/ 22 февраля 2019

Я могу думать о двух направлениях с вашим кодом:

  • FIRST: для #options установлено position:fixed
  • SECOND: измените #main position:absolute на относительный и поместитеваш #options div выше # main
0 голосов
/ 22 февраля 2019 

body {
  background-color: gray;
}

div {
  background-color: #fff;
}

#main {
  max-width: 50%;
  margin: auto;
  padding: 1em;
}

#options {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
  padding: 1em;
  max-width: 5em;
}
<div id="options">
  This should be sticky
</div>
<div id="main">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis
  in faucibus. Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis
  posuere. Aliquam ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus.
  Duis eget augue lectus. Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis. Lorem ipsum dolor
  sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis posuere. Aliquam
  ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus. Duis eget augue lectus.
  Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis.
</div>
...