J'essaie de faire en sorte qu'une div reste collée en haut à gauche, tandis qu'une autre div principale plus grande est centrée et absolue. Le problème est que je ne peux pas obtenir un div collé pour rester collant alors que le div principal est absolu.
Cela fonctionne si je place le div collant au-dessus du div central et règle le div central sur normal , cependant, le div central est poussé vers le bas, ce que j'essaie d'éviter en le définissant sur absolu.
Fiddle: http://jsfiddle.net/fqz6gej9/2/
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%;
}
<div id="main"> (stuff here) </div> <div id="options"> This should be sticky </div>
Voici toutes les informations auxquelles je pense à donner, mais faites-moi savoir si j'ai besoin d'en ajouter d'autres.
3 Réponses :
<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>
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;
}
il a dit mais alors le div central est poussé vers le bas, ce que j'essaie d'éviter en le réglant sur absolu
Le problème est qu'en définissant l'élément sur position: absolue vous le supprimez du flux et vous faites en sorte que la hauteur du corps soit celle de l'élément stikcy ainsi vous allez n'ont aucun comportement collant
Voici une autre idée sans l'utilisation d'absolu où vous pouvez compter sur flexbox pour créer votre mise en page:
<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>
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;
}
Merci, cela a parfaitement fonctionné! Je devrai garder flexbox à l'esprit pour le futur, j'oublie souvent celui-là.
Je peux penser à deux façons avec votre code:
position:fixed position: absolue en relative et place
votre #options div au-dessus de #main