Fixed position child, overflow hidden parent. Hiding bottom onlyHow can I position my div at the bottom of its container?CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issueFixed position but relative to containerPosition absolute but relative to parentDIV is not getting fix in parent divHow to solve IE9 scrolling repaint issue with fixed-position parent that has -ms-transform:translate?Cannot display HTML stringSetting overflow to scroll on fixed div doesn't workCss force child div out of parent that has position absolute and overflow hiddenOverflow child div background-color over parent div
Should we freeze the number of people coming in to the study for Kaplan-Meier test
What is the correct expression of 10/20, 20/30, 30/40 etc?
Strange math syntax in old basic listing
PhD student with mental health issues and bad performance
Do adult Russians normally hand-write Cyrillic as cursive or as block letters?
Is having a hidden directory under /etc safe?
Is it OK to bring delicacies from hometown as tokens of gratitude for an out-of-town interview?
Please help me identify this plane
Why use water tanks from a retired Space Shuttle?
Why was it possible to cause an Apple //e to shut down with SHIFT and paddle button 2?
Hygienic footwear for prehensile feet?
Comma Code - Ch. 4 Automate the Boring Stuff
Creating Fictional Slavic Place Names
Opposite of "Squeaky wheel gets the grease"
Concise way to draw this pyramid
Initialize an array of doubles at compile time
Chopin: marche funèbre bar 15 impossible place
Filling region bounded by multiple paths
How can I add depth to my story or how do I determine if my story already has depth?
Can The Malloreon be read without first reading The Belgariad?
Access to all elements on the page
Does any lore text explain why the planes of Acheron, Gehenna, and Carceri are the alignment they are?
Can you please explain this joke: "I'm going bananas is what I tell my bananas before I leave the house"?
Is the decompression of compressed and encrypted data without decryption also theoretically impossible?
Fixed position child, overflow hidden parent. Hiding bottom only
How can I position my div at the bottom of its container?CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issueFixed position but relative to containerPosition absolute but relative to parentDIV is not getting fix in parent divHow to solve IE9 scrolling repaint issue with fixed-position parent that has -ms-transform:translate?Cannot display HTML stringSetting overflow to scroll on fixed div doesn't workCss force child div out of parent that has position absolute and overflow hiddenOverflow child div background-color over parent div
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I would like to place a series of fixed elements in the same position on a page, and have them be made visible by their parents scrolling into view.
I have this so far: https://codepen.io/porgeet/pen/ywZgyq
.parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="main">
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
</div>Problem
The overflowed parent only seems to be effecting divs that come after it, rather than preceding.
I'm aiming for One to show, then Two, then Three.
Any help would be greatly appreciated.
html css
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
asked Mar 24 at 12:19
PetePete
1227
add a comment |
I would like to place a series of fixed elements in the same position on a page, and have them be made visible by their parents scrolling into view.
I have this so far: https://codepen.io/porgeet/pen/ywZgyq
.parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="main">
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
</div>Problem
The overflowed parent only seems to be effecting divs that come after it, rather than preceding.
I'm aiming for One to show, then Two, then Three.
Any help would be greatly appreciated.
html css
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
asked Mar 24 at 12:19
PetePete
1227
add a comment |
I would like to place a series of fixed elements in the same position on a page, and have them be made visible by their parents scrolling into view.
I have this so far: https://codepen.io/porgeet/pen/ywZgyq
.parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="main">
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
</div>Problem
The overflowed parent only seems to be effecting divs that come after it, rather than preceding.
I'm aiming for One to show, then Two, then Three.
Any help would be greatly appreciated.
html css
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
asked Mar 24 at 12:19
PetePete
1227
I would like to place a series of fixed elements in the same position on a page, and have them be made visible by their parents scrolling into view.
I have this so far: https://codepen.io/porgeet/pen/ywZgyq
.parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="main">
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
</div>Problem
The overflowed parent only seems to be effecting divs that come after it, rather than preceding.
I'm aiming for One to show, then Two, then Three.
Any help would be greatly appreciated.
.parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="main">
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
</div>.parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="main">
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
</div>html css
html css
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
asked Mar 24 at 12:19
PetePete
1227
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
asked Mar 24 at 12:19
PetePete
1227
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
edited Mar 24 at 12:51
Temani Afif
88.9k1051101
88.9k1051101
asked Mar 24 at 12:19
PetePete
1227
asked Mar 24 at 12:19
PetePete
1227
asked Mar 24 at 12:19
PetePete
1227
1227
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
overflow:hidden will do nothing in your case because you made the elements to be fixed1. What your are facing is the logical result of the painting order since you didn't specify any z-index so the second position:relative element will be painted above the first position:fixed and so on that's why the second background will hide the first title and so on.
With position:fixed you won't be able to achieve this because your code is almost equivalent to the below one where there is no more relation between the parent element and child.
.parent,
.child
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
text-align:center;
overflow: hidden;
width:100%;
.one
background: pink;
.one + .child
color: green;
.two
background: aquamarine;
.two + .child
color: blue;
.three
background: pink;
.three + .child
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>I think your only way to achieve the needed effect is to consider some JS. Here is an easier idea where you can consider position:absolute to be able to use overflow:hidden:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top:var(--t,0);
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>The trick is to adjust margin using the scroll of window to move all the element the same way and initially we position them at the same position in the screen that's why I added 100vh and 200vh to move the element upper.
We can also adjust the translate:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(calc(-50% + var(--t,0px)));
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
body
margin:0;
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
1This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.ref
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.ref
answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
1
Of course, the painting order. That's what was confusing me, I read that fixed position is relative to the view order but couldn't understand the aforementioned effect. I see you're pushing the elements further down the more you scroll, keeping them in the same visual position. The -vh is pushing them out of sight initially. Thank you
– Pete
Mar 24 at 13:09
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%2f55323728%2ffixed-position-child-overflow-hidden-parent-hiding-bottom-only%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
overflow:hidden will do nothing in your case because you made the elements to be fixed1. What your are facing is the logical result of the painting order since you didn't specify any z-index so the second position:relative element will be painted above the first position:fixed and so on that's why the second background will hide the first title and so on.
With position:fixed you won't be able to achieve this because your code is almost equivalent to the below one where there is no more relation between the parent element and child.
.parent,
.child
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
text-align:center;
overflow: hidden;
width:100%;
.one
background: pink;
.one + .child
color: green;
.two
background: aquamarine;
.two + .child
color: blue;
.three
background: pink;
.three + .child
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>I think your only way to achieve the needed effect is to consider some JS. Here is an easier idea where you can consider position:absolute to be able to use overflow:hidden:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top:var(--t,0);
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>The trick is to adjust margin using the scroll of window to move all the element the same way and initially we position them at the same position in the screen that's why I added 100vh and 200vh to move the element upper.
We can also adjust the translate:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(calc(-50% + var(--t,0px)));
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
body
margin:0;
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
1This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.ref
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.ref
answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
1
Of course, the painting order. That's what was confusing me, I read that fixed position is relative to the view order but couldn't understand the aforementioned effect. I see you're pushing the elements further down the more you scroll, keeping them in the same visual position. The -vh is pushing them out of sight initially. Thank you
– Pete
Mar 24 at 13:09
add a comment |
overflow:hidden will do nothing in your case because you made the elements to be fixed1. What your are facing is the logical result of the painting order since you didn't specify any z-index so the second position:relative element will be painted above the first position:fixed and so on that's why the second background will hide the first title and so on.
With position:fixed you won't be able to achieve this because your code is almost equivalent to the below one where there is no more relation between the parent element and child.
.parent,
.child
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
text-align:center;
overflow: hidden;
width:100%;
.one
background: pink;
.one + .child
color: green;
.two
background: aquamarine;
.two + .child
color: blue;
.three
background: pink;
.three + .child
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>I think your only way to achieve the needed effect is to consider some JS. Here is an easier idea where you can consider position:absolute to be able to use overflow:hidden:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top:var(--t,0);
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>The trick is to adjust margin using the scroll of window to move all the element the same way and initially we position them at the same position in the screen that's why I added 100vh and 200vh to move the element upper.
We can also adjust the translate:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(calc(-50% + var(--t,0px)));
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
body
margin:0;
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
1This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.ref
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.ref
answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
1
Of course, the painting order. That's what was confusing me, I read that fixed position is relative to the view order but couldn't understand the aforementioned effect. I see you're pushing the elements further down the more you scroll, keeping them in the same visual position. The -vh is pushing them out of sight initially. Thank you
– Pete
Mar 24 at 13:09
add a comment |
overflow:hidden will do nothing in your case because you made the elements to be fixed1. What your are facing is the logical result of the painting order since you didn't specify any z-index so the second position:relative element will be painted above the first position:fixed and so on that's why the second background will hide the first title and so on.
With position:fixed you won't be able to achieve this because your code is almost equivalent to the below one where there is no more relation between the parent element and child.
.parent,
.child
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
text-align:center;
overflow: hidden;
width:100%;
.one
background: pink;
.one + .child
color: green;
.two
background: aquamarine;
.two + .child
color: blue;
.three
background: pink;
.three + .child
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>I think your only way to achieve the needed effect is to consider some JS. Here is an easier idea where you can consider position:absolute to be able to use overflow:hidden:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top:var(--t,0);
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>The trick is to adjust margin using the scroll of window to move all the element the same way and initially we position them at the same position in the screen that's why I added 100vh and 200vh to move the element upper.
We can also adjust the translate:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(calc(-50% + var(--t,0px)));
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
body
margin:0;
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
1This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.ref
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.ref
answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
overflow:hidden will do nothing in your case because you made the elements to be fixed1. What your are facing is the logical result of the painting order since you didn't specify any z-index so the second position:relative element will be painted above the first position:fixed and so on that's why the second background will hide the first title and so on.
With position:fixed you won't be able to achieve this because your code is almost equivalent to the below one where there is no more relation between the parent element and child.
.parent,
.child
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
text-align:center;
overflow: hidden;
width:100%;
.one
background: pink;
.one + .child
color: green;
.two
background: aquamarine;
.two + .child
color: blue;
.three
background: pink;
.three + .child
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>I think your only way to achieve the needed effect is to consider some JS. Here is an easier idea where you can consider position:absolute to be able to use overflow:hidden:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top:var(--t,0);
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>The trick is to adjust margin using the scroll of window to move all the element the same way and initially we position them at the same position in the screen that's why I added 100vh and 200vh to move the element upper.
We can also adjust the translate:
window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(calc(-50% + var(--t,0px)));
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
body
margin:0;
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>
1This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.ref
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.ref
.parent,
.child
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
text-align:center;
overflow: hidden;
width:100%;
.one
background: pink;
.one + .child
color: green;
.two
background: aquamarine;
.two + .child
color: blue;
.three
background: pink;
.three + .child
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>.parent,
.child
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
text-align:center;
overflow: hidden;
width:100%;
.one
background: pink;
.one + .child
color: green;
.two
background: aquamarine;
.two + .child
color: blue;
.three
background: pink;
.three + .child
color: red;
.child
position: fixed;
top: 50%;
transform: translateY(-50%);
<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top:var(--t,0);
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top:var(--t,0);
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(calc(-50% + var(--t,0px)));
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
body
margin:0;
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>window.onscroll = function() .parent
position: relative;
height: 100vh;
display: flex;
font-family: sans-serif;
font-weight: bold;
font-size: 5em;
align-items: center;
justify-content: center;
overflow: hidden;
.one
background: pink;
color: green;
.two
background: aquamarine;
color: blue;
.three
background: pink;
color: red;
.child
position: absolute;
top: 50%;
transform: translateY(calc(-50% + var(--t,0px)));
.two .child
top: calc(50% - 100vh);
.three .child
top: calc(50% - 200vh);
body
margin:0;
<div class="parent one">
<div class="child">One</div>
</div>
<div class="parent two">
<div class="child">Two</div>
</div>
<div class="parent three">
<div class="child">Three</div>
</div>answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
edited Mar 24 at 13:42
answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
answered Mar 24 at 12:42
Temani AfifTemani Afif
88.9k1051101
88.9k1051101
1
Of course, the painting order. That's what was confusing me, I read that fixed position is relative to the view order but couldn't understand the aforementioned effect. I see you're pushing the elements further down the more you scroll, keeping them in the same visual position. The -vh is pushing them out of sight initially. Thank you
– Pete
Mar 24 at 13:09
add a comment |
1
Of course, the painting order. That's what was confusing me, I read that fixed position is relative to the view order but couldn't understand the aforementioned effect. I see you're pushing the elements further down the more you scroll, keeping them in the same visual position. The -vh is pushing them out of sight initially. Thank you
– Pete
Mar 24 at 13:09
1
1
Of course, the painting order. That's what was confusing me, I read that fixed position is relative to the view order but couldn't understand the aforementioned effect. I see you're pushing the elements further down the more you scroll, keeping them in the same visual position. The -vh is pushing them out of sight initially. Thank you
– Pete
Mar 24 at 13:09
Of course, the painting order. That's what was confusing me, I read that fixed position is relative to the view order but couldn't understand the aforementioned effect. I see you're pushing the elements further down the more you scroll, keeping them in the same visual position. The -vh is pushing them out of sight initially. Thank you
– Pete
Mar 24 at 13:09
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.
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%2f55323728%2ffixed-position-child-overflow-hidden-parent-hiding-bottom-only%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
