CSS position: sticky behaves like fixed (within w3.css modal)












0















My sticky close-button for my modal doesn´t work properly. Instead of behaving sticky it behaves like a fixed element, even though I specified top:0 and -webkit-position:sticky;position:sticky; in my css rules. Below you can see my code snippet:



<html>
<head>
<style>
.modalclose {
position: -webkit-sticky;
position: sticky;
width: 100%;
top: 0px;
}
</style>
<link rel="stylesheet" href="./css/w3.css">
</head>
<body>
<div class="w3-modal">
<div class="w3-modal-content w3-display-container">
<div style="position:absolute;top:0;left:0;height:43px;width:100%;background-color:black;"></div>
<div onclick="javascript:void(0);" class="w3-button w3-large w3-display-topright modalclose w3-black w3-text-white">x</div>
<div class="w3-container w3-black">
<h1>LOREM IPSUM</h1>
</div>
<div class="w3-container" style="padding-bottom: 2000px">
<h5>Lorem Ipsum</h5>
</div>
</div>
</div>
</body>
</html>


In Firefox (Desktop) and Chrome (3 different mobile devices), the close-button is being treated as if it would be an fixed element, it never "sticks" to the top of the viewport (except for 1 mobile device running an older chrome version, there it works fine, but therefore the span is not click-able).

What am I doing wrong?

Here´s a link to the above code on my page: click here










share|improve this question

























  • By defining "top:0px" your sticky element will act like a fixed element. It will scroll with the content until top=0 is reached.

    – Heiko
    Nov 22 '18 at 16:37











  • @Heiko In tutorials they say that if I want it to behave like a normal element until it reaches top: 0 (and then sticks to the top) I have to specify top:0;

    – SearchingSolutions
    Nov 22 '18 at 16:42











  • The top position is where a sticky element stops scrolling with the rest of your page. Which parts of your modal should stick to the top of the viewport? Can you describe more detailed, what you are trying to achieve?

    – Heiko
    Nov 22 '18 at 16:47













  • The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko

    – SearchingSolutions
    Nov 22 '18 at 16:53













  • I just now saw the confusing part with vendor prefixes. You must use "position: -webkit-sticky" for webkit browsers. And you will have define your span as a block element for Safari, as well. Or you change to "div".

    – Heiko
    Nov 22 '18 at 17:02


















0















My sticky close-button for my modal doesn´t work properly. Instead of behaving sticky it behaves like a fixed element, even though I specified top:0 and -webkit-position:sticky;position:sticky; in my css rules. Below you can see my code snippet:



<html>
<head>
<style>
.modalclose {
position: -webkit-sticky;
position: sticky;
width: 100%;
top: 0px;
}
</style>
<link rel="stylesheet" href="./css/w3.css">
</head>
<body>
<div class="w3-modal">
<div class="w3-modal-content w3-display-container">
<div style="position:absolute;top:0;left:0;height:43px;width:100%;background-color:black;"></div>
<div onclick="javascript:void(0);" class="w3-button w3-large w3-display-topright modalclose w3-black w3-text-white">x</div>
<div class="w3-container w3-black">
<h1>LOREM IPSUM</h1>
</div>
<div class="w3-container" style="padding-bottom: 2000px">
<h5>Lorem Ipsum</h5>
</div>
</div>
</div>
</body>
</html>


In Firefox (Desktop) and Chrome (3 different mobile devices), the close-button is being treated as if it would be an fixed element, it never "sticks" to the top of the viewport (except for 1 mobile device running an older chrome version, there it works fine, but therefore the span is not click-able).

What am I doing wrong?

Here´s a link to the above code on my page: click here










share|improve this question

























  • By defining "top:0px" your sticky element will act like a fixed element. It will scroll with the content until top=0 is reached.

    – Heiko
    Nov 22 '18 at 16:37











  • @Heiko In tutorials they say that if I want it to behave like a normal element until it reaches top: 0 (and then sticks to the top) I have to specify top:0;

    – SearchingSolutions
    Nov 22 '18 at 16:42











  • The top position is where a sticky element stops scrolling with the rest of your page. Which parts of your modal should stick to the top of the viewport? Can you describe more detailed, what you are trying to achieve?

    – Heiko
    Nov 22 '18 at 16:47













  • The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko

    – SearchingSolutions
    Nov 22 '18 at 16:53













  • I just now saw the confusing part with vendor prefixes. You must use "position: -webkit-sticky" for webkit browsers. And you will have define your span as a block element for Safari, as well. Or you change to "div".

    – Heiko
    Nov 22 '18 at 17:02
















0












0








0


0






My sticky close-button for my modal doesn´t work properly. Instead of behaving sticky it behaves like a fixed element, even though I specified top:0 and -webkit-position:sticky;position:sticky; in my css rules. Below you can see my code snippet:



<html>
<head>
<style>
.modalclose {
position: -webkit-sticky;
position: sticky;
width: 100%;
top: 0px;
}
</style>
<link rel="stylesheet" href="./css/w3.css">
</head>
<body>
<div class="w3-modal">
<div class="w3-modal-content w3-display-container">
<div style="position:absolute;top:0;left:0;height:43px;width:100%;background-color:black;"></div>
<div onclick="javascript:void(0);" class="w3-button w3-large w3-display-topright modalclose w3-black w3-text-white">x</div>
<div class="w3-container w3-black">
<h1>LOREM IPSUM</h1>
</div>
<div class="w3-container" style="padding-bottom: 2000px">
<h5>Lorem Ipsum</h5>
</div>
</div>
</div>
</body>
</html>


In Firefox (Desktop) and Chrome (3 different mobile devices), the close-button is being treated as if it would be an fixed element, it never "sticks" to the top of the viewport (except for 1 mobile device running an older chrome version, there it works fine, but therefore the span is not click-able).

What am I doing wrong?

Here´s a link to the above code on my page: click here










share|improve this question
















My sticky close-button for my modal doesn´t work properly. Instead of behaving sticky it behaves like a fixed element, even though I specified top:0 and -webkit-position:sticky;position:sticky; in my css rules. Below you can see my code snippet:



<html>
<head>
<style>
.modalclose {
position: -webkit-sticky;
position: sticky;
width: 100%;
top: 0px;
}
</style>
<link rel="stylesheet" href="./css/w3.css">
</head>
<body>
<div class="w3-modal">
<div class="w3-modal-content w3-display-container">
<div style="position:absolute;top:0;left:0;height:43px;width:100%;background-color:black;"></div>
<div onclick="javascript:void(0);" class="w3-button w3-large w3-display-topright modalclose w3-black w3-text-white">x</div>
<div class="w3-container w3-black">
<h1>LOREM IPSUM</h1>
</div>
<div class="w3-container" style="padding-bottom: 2000px">
<h5>Lorem Ipsum</h5>
</div>
</div>
</div>
</body>
</html>


In Firefox (Desktop) and Chrome (3 different mobile devices), the close-button is being treated as if it would be an fixed element, it never "sticks" to the top of the viewport (except for 1 mobile device running an older chrome version, there it works fine, but therefore the span is not click-able).

What am I doing wrong?

Here´s a link to the above code on my page: click here







css modal-dialog css-position sticky w3.css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 '18 at 18:14







SearchingSolutions

















asked Nov 22 '18 at 15:30









SearchingSolutionsSearchingSolutions

143110




143110













  • By defining "top:0px" your sticky element will act like a fixed element. It will scroll with the content until top=0 is reached.

    – Heiko
    Nov 22 '18 at 16:37











  • @Heiko In tutorials they say that if I want it to behave like a normal element until it reaches top: 0 (and then sticks to the top) I have to specify top:0;

    – SearchingSolutions
    Nov 22 '18 at 16:42











  • The top position is where a sticky element stops scrolling with the rest of your page. Which parts of your modal should stick to the top of the viewport? Can you describe more detailed, what you are trying to achieve?

    – Heiko
    Nov 22 '18 at 16:47













  • The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko

    – SearchingSolutions
    Nov 22 '18 at 16:53













  • I just now saw the confusing part with vendor prefixes. You must use "position: -webkit-sticky" for webkit browsers. And you will have define your span as a block element for Safari, as well. Or you change to "div".

    – Heiko
    Nov 22 '18 at 17:02





















  • By defining "top:0px" your sticky element will act like a fixed element. It will scroll with the content until top=0 is reached.

    – Heiko
    Nov 22 '18 at 16:37











  • @Heiko In tutorials they say that if I want it to behave like a normal element until it reaches top: 0 (and then sticks to the top) I have to specify top:0;

    – SearchingSolutions
    Nov 22 '18 at 16:42











  • The top position is where a sticky element stops scrolling with the rest of your page. Which parts of your modal should stick to the top of the viewport? Can you describe more detailed, what you are trying to achieve?

    – Heiko
    Nov 22 '18 at 16:47













  • The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko

    – SearchingSolutions
    Nov 22 '18 at 16:53













  • I just now saw the confusing part with vendor prefixes. You must use "position: -webkit-sticky" for webkit browsers. And you will have define your span as a block element for Safari, as well. Or you change to "div".

    – Heiko
    Nov 22 '18 at 17:02



















By defining "top:0px" your sticky element will act like a fixed element. It will scroll with the content until top=0 is reached.

– Heiko
Nov 22 '18 at 16:37





By defining "top:0px" your sticky element will act like a fixed element. It will scroll with the content until top=0 is reached.

– Heiko
Nov 22 '18 at 16:37













@Heiko In tutorials they say that if I want it to behave like a normal element until it reaches top: 0 (and then sticks to the top) I have to specify top:0;

– SearchingSolutions
Nov 22 '18 at 16:42





@Heiko In tutorials they say that if I want it to behave like a normal element until it reaches top: 0 (and then sticks to the top) I have to specify top:0;

– SearchingSolutions
Nov 22 '18 at 16:42













The top position is where a sticky element stops scrolling with the rest of your page. Which parts of your modal should stick to the top of the viewport? Can you describe more detailed, what you are trying to achieve?

– Heiko
Nov 22 '18 at 16:47







The top position is where a sticky element stops scrolling with the rest of your page. Which parts of your modal should stick to the top of the viewport? Can you describe more detailed, what you are trying to achieve?

– Heiko
Nov 22 '18 at 16:47















The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko

– SearchingSolutions
Nov 22 '18 at 16:53







The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko

– SearchingSolutions
Nov 22 '18 at 16:53















I just now saw the confusing part with vendor prefixes. You must use "position: -webkit-sticky" for webkit browsers. And you will have define your span as a block element for Safari, as well. Or you change to "div".

– Heiko
Nov 22 '18 at 17:02







I just now saw the confusing part with vendor prefixes. You must use "position: -webkit-sticky" for webkit browsers. And you will have define your span as a block element for Safari, as well. Or you change to "div".

– Heiko
Nov 22 '18 at 17:02














1 Answer
1






active

oldest

votes


















0














The problem is the the .w3-modal has a fixed position and a 100px padding-top. It never leaves the screen. And it has a padding-top of 100px.



Your .modalclose is already sticky and working fine.



Try removing the position fixed of the .w3-modal class. If you want the modal to be fixed, then you could remove the padding-top: 100px from it, so that the .modalclose can come up to the top of the screen.






share|improve this answer
























  • Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!

    – SearchingSolutions
    Nov 22 '18 at 19:19






  • 1





    Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent.

    – ndvo
    Nov 22 '18 at 21:50











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434164%2fcss-position-sticky-behaves-like-fixed-within-w3-css-modal%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














The problem is the the .w3-modal has a fixed position and a 100px padding-top. It never leaves the screen. And it has a padding-top of 100px.



Your .modalclose is already sticky and working fine.



Try removing the position fixed of the .w3-modal class. If you want the modal to be fixed, then you could remove the padding-top: 100px from it, so that the .modalclose can come up to the top of the screen.






share|improve this answer
























  • Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!

    – SearchingSolutions
    Nov 22 '18 at 19:19






  • 1





    Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent.

    – ndvo
    Nov 22 '18 at 21:50
















0














The problem is the the .w3-modal has a fixed position and a 100px padding-top. It never leaves the screen. And it has a padding-top of 100px.



Your .modalclose is already sticky and working fine.



Try removing the position fixed of the .w3-modal class. If you want the modal to be fixed, then you could remove the padding-top: 100px from it, so that the .modalclose can come up to the top of the screen.






share|improve this answer
























  • Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!

    – SearchingSolutions
    Nov 22 '18 at 19:19






  • 1





    Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent.

    – ndvo
    Nov 22 '18 at 21:50














0












0








0







The problem is the the .w3-modal has a fixed position and a 100px padding-top. It never leaves the screen. And it has a padding-top of 100px.



Your .modalclose is already sticky and working fine.



Try removing the position fixed of the .w3-modal class. If you want the modal to be fixed, then you could remove the padding-top: 100px from it, so that the .modalclose can come up to the top of the screen.






share|improve this answer













The problem is the the .w3-modal has a fixed position and a 100px padding-top. It never leaves the screen. And it has a padding-top of 100px.



Your .modalclose is already sticky and working fine.



Try removing the position fixed of the .w3-modal class. If you want the modal to be fixed, then you could remove the padding-top: 100px from it, so that the .modalclose can come up to the top of the screen.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 22 '18 at 18:35









ndvondvo

406311




406311













  • Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!

    – SearchingSolutions
    Nov 22 '18 at 19:19






  • 1





    Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent.

    – ndvo
    Nov 22 '18 at 21:50



















  • Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!

    – SearchingSolutions
    Nov 22 '18 at 19:19






  • 1





    Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent.

    – ndvo
    Nov 22 '18 at 21:50

















Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!

– SearchingSolutions
Nov 22 '18 at 19:19





Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!

– SearchingSolutions
Nov 22 '18 at 19:19




1




1





Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent.

– ndvo
Nov 22 '18 at 21:50





Perhaps if you change the order of the elements you can use another element margin-top to achieve the same effect as the padding-top on the parent.

– ndvo
Nov 22 '18 at 21:50




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434164%2fcss-position-sticky-behaves-like-fixed-within-w3-css-modal%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()