How to use CSS Top with it's parent element, rather than it's value relative to the document The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceHow do you keep parents of floated elements from collapsing?IE6 background misalignedFloating elements within a div, floats outside of div. Why?How can I set the default value for an HTML <select> element?How to set the margin or padding as percentage of height of parent container?Left padding on container when content of the article goes past the foldHow to make Twitter Bootstrap menu dropdown on hover rather than clickRemove margins in HTML5Cannot display HTML stringCSS position:fixed is working for the header but not for the footer
Can the DM override racial traits?
How to politely respond to generic emails requesting a PhD/job in my lab? Without wasting too much time
Did the UK government pay "millions and millions of dollars" to try to snag Julian Assange?
Sort a list of pairs representing an acyclic, partial automorphism
Did God make two great lights or did He make the great light two?
How are presidential pardons supposed to be used?
Semisimplicity of the category of coherent sheaves?
How can I protect witches in combat who wear limited clothing?
Can a 1st-level character have an ability score above 18?
Who or what is the being for whom Being is a question for Heidegger?
Segmentation fault output is suppressed when piping stdin into a function. Why?
Python - Fishing Simulator
Wall plug outlet change
Can the prologue be the backstory of your main character?
University's motivation for having tenure-track positions
Typeface like Times New Roman but with "tied" percent sign
Is this wall load bearing? Blueprints and photos attached
Problems with Ubuntu mount /tmp
How do I add random spotting to the same face in cycles?
Arduino Pro Micro - switch off LEDs
Does Parliament need to approve the new Brexit delay to 31 October 2019?
How did the audience guess the pentatonic scale in Bobby McFerrin's presentation?
Mortgage adviser recommends a longer term than necessary combined with overpayments
How to delete random line from file using Unix command?
How to use CSS Top with it's parent element, rather than it's value relative to the document
The 2019 Stack Overflow Developer Survey Results Are In
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experienceHow do you keep parents of floated elements from collapsing?IE6 background misalignedFloating elements within a div, floats outside of div. Why?How can I set the default value for an HTML <select> element?How to set the margin or padding as percentage of height of parent container?Left padding on container when content of the article goes past the foldHow to make Twitter Bootstrap menu dropdown on hover rather than clickRemove margins in HTML5Cannot display HTML stringCSS position:fixed is working for the header but not for the footer
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I'm making a single page website for a friend and I'm currently working on the about age. I have this design idea to have square divs to be layered on top of one another using different left/right/top/bottom values. But whenever I set the top or bottom values, their new position is relative to the entire document, rather than it's immediate parent div (.about-container). How can I make sure that the square divs and their top/bottom values are relative to their parent container, rather than the entire document?
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html css
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
add a comment |
0
I'm making a single page website for a friend and I'm currently working on the about age. I have this design idea to have square divs to be layered on top of one another using different left/right/top/bottom values. But whenever I set the top or bottom values, their new position is relative to the entire document, rather than it's immediate parent div (.about-container). How can I make sure that the square divs and their top/bottom values are relative to their parent container, rather than the entire document?
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html css
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
developer.mozilla.org/en-US/docs/Web/CSS/top: The effect of top depends on how the element is positioned
– Pete
Mar 8 at 14:04
add a comment |
0
0
0
I'm making a single page website for a friend and I'm currently working on the about age. I have this design idea to have square divs to be layered on top of one another using different left/right/top/bottom values. But whenever I set the top or bottom values, their new position is relative to the entire document, rather than it's immediate parent div (.about-container). How can I make sure that the square divs and their top/bottom values are relative to their parent container, rather than the entire document?
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html css
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
I'm making a single page website for a friend and I'm currently working on the about age. I have this design idea to have square divs to be layered on top of one another using different left/right/top/bottom values. But whenever I set the top or bottom values, their new position is relative to the entire document, rather than it's immediate parent div (.about-container). How can I make sure that the square divs and their top/bottom values are relative to their parent container, rather than the entire document?
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html css
html css
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
asked Mar 8 at 13:40
fellinlovewithamanfellinlovewithaman
405
405
developer.mozilla.org/en-US/docs/Web/CSS/top: The effect of top depends on how the element is positioned
– Pete
Mar 8 at 14:04
add a comment |
developer.mozilla.org/en-US/docs/Web/CSS/top: The effect of top depends on how the element is positioned
– Pete
Mar 8 at 14:04
developer.mozilla.org/en-US/docs/Web/CSS/top: The effect of top depends on how the element is positioned
– Pete
Mar 8 at 14:04
developer.mozilla.org/en-US/docs/Web/CSS/top: The effect of top depends on how the element is positioned
– Pete
Mar 8 at 14:04
add a comment |
2 Answers
2
active
oldest
votes
0
The reason for this is that position:absolute positions a div depending on the next positioned (i.e. not static) ancestor - and because there are no non-static ancestors, it automatically defaults to position it based on the body.
If you want your three elements to be positioned based on the parent, the recommended course of action would be to assign a position:relative to the immediate parent (which would be the div with and id of about rather than .about-container (which is simply the class assigned to your three divs).
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position:relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:48
DKyleoDKyleo
599511
add a comment |
2
Use relative position on #about to make elements in #about in absolute position, relative to #about and not the document.
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position: relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
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
);
);
draft saved
draft discarded
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%2f55064432%2fhow-to-use-css-top-with-its-parent-element-rather-than-its-value-relative-to%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The reason for this is that position:absolute positions a div depending on the next positioned (i.e. not static) ancestor - and because there are no non-static ancestors, it automatically defaults to position it based on the body.
If you want your three elements to be positioned based on the parent, the recommended course of action would be to assign a position:relative to the immediate parent (which would be the div with and id of about rather than .about-container (which is simply the class assigned to your three divs).
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position:relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:48
DKyleoDKyleo
599511
add a comment |
0
The reason for this is that position:absolute positions a div depending on the next positioned (i.e. not static) ancestor - and because there are no non-static ancestors, it automatically defaults to position it based on the body.
If you want your three elements to be positioned based on the parent, the recommended course of action would be to assign a position:relative to the immediate parent (which would be the div with and id of about rather than .about-container (which is simply the class assigned to your three divs).
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position:relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:48
DKyleoDKyleo
599511
add a comment |
0
0
0
The reason for this is that position:absolute positions a div depending on the next positioned (i.e. not static) ancestor - and because there are no non-static ancestors, it automatically defaults to position it based on the body.
If you want your three elements to be positioned based on the parent, the recommended course of action would be to assign a position:relative to the immediate parent (which would be the div with and id of about rather than .about-container (which is simply the class assigned to your three divs).
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position:relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:48
DKyleoDKyleo
599511
The reason for this is that position:absolute positions a div depending on the next positioned (i.e. not static) ancestor - and because there are no non-static ancestors, it automatically defaults to position it based on the body.
If you want your three elements to be positioned based on the parent, the recommended course of action would be to assign a position:relative to the immediate parent (which would be the div with and id of about rather than .about-container (which is simply the class assigned to your three divs).
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position:relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position:relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position:relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:48
DKyleoDKyleo
599511
answered Mar 8 at 13:48
DKyleoDKyleo
599511
answered Mar 8 at 13:48
DKyleoDKyleo
599511
answered Mar 8 at 13:48
DKyleoDKyleo
599511
599511
add a comment |
add a comment |
2
Use relative position on #about to make elements in #about in absolute position, relative to #about and not the document.
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position: relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
add a comment |
2
Use relative position on #about to make elements in #about in absolute position, relative to #about and not the document.
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position: relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
add a comment |
2
2
2
Use relative position on #about to make elements in #about in absolute position, relative to #about and not the document.
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position: relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
Use relative position on #about to make elements in #about in absolute position, relative to #about and not the document.
html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position: relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position: relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>html, body
margin: 0;
padding: 0;
div
display: block;
nav ul, nav ol
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
a
text-decoration: none;
color: inherit;
#body
visibility: visible;
max-width: 1300px;
margin: 5px auto;
#desktop-navbar
text-transform: uppercase;
width: 100%;
height: 60px;
position: fixed;
z-index:1;
#desktop-logo
float: left;
.logo
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper
height: 90px;
padding: 0 45px;
margin-top: 0;
#desktop-nav-wrapper nav ul
float: right;
padding-top: 35px;
font-size: 16px;
#desktop-nav-wrapper nav li
position: relative;
display: inline-block;
padding-left: 35px;
color: #ffffff;
font-family: Thasadith;
font-weight: 700;
#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
#home
height: 700px;
background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.container
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
#home-content
font-family: Thasadith;
font-weight: 300;
font-size: 38px;
color: #ffffff;
letter-spacing: 5px;
#about
height: 700px;
background-color: #c96567;
position: relative;
.about-container
display: flex;
position: absolute;
height: inherit;
#about-div-one
height: 50px;
width: 50px;
background-color: red;
left: 25%;
top: 35%;
#about-div-two
height: 50px;
width: 50px;
background-color: blue;
left: 75%;
top: 64%;
#about-div-three
height: 50px;
width: 50px;
background-color: orange;
left: 74%;
top: 65%;
<div id="home">
<div id="home-content" class="container">
<p>tatuando. dibujo. pintura. estilo de vida.</p>
</div>
</div>
<div id="about">
<div id="about-div-one" class="about-container">
</div>
<div id="about-div-two" class="about-container">
</div>
<div id="about-div-three" class="about-container">
</div>
</div>answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
answered Mar 8 at 13:47
Vincent GVincent G
7,6431728
7,6431728
add a comment |
add a comment |
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
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%2f55064432%2fhow-to-use-css-top-with-its-parent-element-rather-than-its-value-relative-to%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
developer.mozilla.org/en-US/docs/Web/CSS/top: The effect of top depends on how the element is positioned
– Pete
Mar 8 at 14:04