CSS position: sticky behaves like fixed (within w3.css modal)
up vote
0
down vote
favorite
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
asked Nov 22 at 15:30
SearchingSolutions
1319
|
show 2 more comments
up vote
0
down vote
favorite
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
asked Nov 22 at 15:30
SearchingSolutions
1319
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 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 specifytop:0;
– SearchingSolutions
Nov 22 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 at 16:47
The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko
– SearchingSolutions
Nov 22 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 at 17:02
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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
asked Nov 22 at 15:30
SearchingSolutions
1319
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
css modal-dialog css-position sticky w3.css
asked Nov 22 at 15:30
SearchingSolutions
1319
asked Nov 22 at 15:30
SearchingSolutions
1319
edited Nov 22 at 18:14
asked Nov 22 at 15:30
SearchingSolutions
1319
asked Nov 22 at 15:30
SearchingSolutions
1319
asked Nov 22 at 15:30
SearchingSolutions
1319
1319
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 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 specifytop:0;
– SearchingSolutions
Nov 22 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 at 16:47
The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko
– SearchingSolutions
Nov 22 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 at 17:02
|
show 2 more comments
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 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 specifytop:0;
– SearchingSolutions
Nov 22 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 at 16:47
The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko
– SearchingSolutions
Nov 22 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 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 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 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 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 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 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 at 16:47
The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko
– SearchingSolutions
Nov 22 at 16:53
The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko
– SearchingSolutions
Nov 22 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 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 at 17:02
|
show 2 more comments
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
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.
answered Nov 22 at 18:35
ndvo
379110
Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!
– SearchingSolutions
Nov 22 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 at 21:50
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
up vote
0
down vote
accepted
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.
answered Nov 22 at 18:35
ndvo
379110
Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!
– SearchingSolutions
Nov 22 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 at 21:50
add a comment |
up vote
0
down vote
accepted
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.
answered Nov 22 at 18:35
ndvo
379110
Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!
– SearchingSolutions
Nov 22 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 at 21:50
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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.
answered Nov 22 at 18:35
ndvo
379110
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.
answered Nov 22 at 18:35
ndvo
379110
answered Nov 22 at 18:35
ndvo
379110
answered Nov 22 at 18:35
ndvo
379110
answered Nov 22 at 18:35
ndvo
379110
379110
Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!
– SearchingSolutions
Nov 22 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 at 21:50
add a comment |
Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!
– SearchingSolutions
Nov 22 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 at 21:50
Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!
– SearchingSolutions
Nov 22 at 19:19
Removing the padding-top worked, now it just doesnt look good anymore :/. Thank you anyways!
– SearchingSolutions
Nov 22 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 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 at 21:50
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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 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 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 at 16:47
The Close-Button should stick to the top of the screen while scrolling down in the modal. @Heiko
– SearchingSolutions
Nov 22 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 at 17:02