if I have two divs on my page. One has fixed positioning at the top of the page style="position:fixed; left:0; top:0;right:0;" and one has fixed positioning to the left of the page style="position:fixed; left:0; top:0;bottom:0;" is there any way to have the left div positioned so it's top edge lines up with the bottom edge of the top positioned div without hard coding margins or padding? By default there will be some partial overlap
Placing both the div in another container div and defining the position:fixed style to the container div would solve your issue.
<div style="position:fixed;top:0;left:0;right:0;">
<div>div 1</div>
<div>div 2</div>
</div>
Try this
.div0{
position: relative;
width: 600px;
height: 400px;
background: blue;
perspective: 100px;
}
.div1{
position:fixed; left:0; top:0;right:0;
width: 200px;
height: 200px;
background-color: red;
}
.div2{
position:fixed; left:200; bottom:0;
width: 200px;
height: 200px;
background-color: green;
}
<div class="div0">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
Try this, I think you want to do the same.
.parent{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.child1,.child2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.child1{
top: 0;
right: 0;
}
.child2{
bottom: 0;
width: 200px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If the top div has a defined height, you can simply take that value and use if for the left DIVs top setting:
.top,
.left {
position: fixed;
}
.top {
top: 0;
left: 0;
right: 0;
height: 100px;
background: red;
}
.left {
top: 100px;
bottom: 0;
left: 0;
width: 150px;
background: green;
}
<div class="top"></div>
<div class="left"></div>
Related
I need a div to float within another div. Tried using position: fixed, but the div floats beyond the parent div now.
Here is the sample code.
I need the "Div to Float" to float inside "Div 1". now it floats outside 'Div 1' and go behind 'Div 2'
Here is the code.
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've tried?
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've expected?
I need the "Div to Float" to float inside "Div 1".
What is the result now?
Now it floats outside 'Div 1' and go behind 'Div 2'
.container {
position:relative;
}
.element{
position:absolute;
}
I don't fully understand what you mean by "float", but this code will place your div.element inside div.container
Position: Fixed
position: fixed; is positioning the element relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Position: Sticky
position: sticky; is positioning the element relative until a given offset position is met in the viewport - then it "sticks" in place. When the user scrolls past the parent div, the element will stay with its parent.
Read more about Layout positioning
.wrapper {
width: 100%;
height: 200px;
overflow-y: scroll;
position: relative;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
z-index: 2;
}
.second {
z-index: 0;
}
.element {
background: yellow;
position: sticky;
width: 90%;
height: 80px;
top: 50px;
right: 0px;
left: 769px;
border: 2px solid blue;
}
.fixed {
position: fixed;
top: 50px;
left: 0;
width: 50%;
z-index: 1;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">I am 50px away from the top of my green parent, and I will stop being sticky when document gets scrolled away from my parent.</div>
</div>
<div class="fixed" style="margin-top: 30px; background: red">I am just gonna stay in this place forever cause I'm fixed. Using z-index on me or the elements will control whether I'm above or below any other elements.</div>
</div>
<div class="container second" style="margin-top: 30px; background: purple">Div 2</div>
I want a child div to stick to the bottom of parent div on the border. Something like the div below. But I want that red div should always be on the center of the border vertically, meaning the child div should stick to the bottom border of parent div with 50% inside the parent and 50% outside. So if the height of parent div changes the red still stays on the center vertically.
The way I did was to give bottom: -20px, but if I change the height of the parent then the div won't stay in the center vertically to the bottom border.
Here's the code I came up with.
.parent {
position: absolute;
background-color:black;
width: 200px;
height: 200px
}
.another-parent {
position: relative;
float:right;
background-color:black;
width: 200px;
height: 70px
}
.child {
position: absolute;
background-color: red;
width: 50px;
height: 50px;
bottom: -20px;
}
<div class="parent">
<div class="child">
</div>
</div>
<div class="another-parent">
<div class="child">
</div>
</div>
You can change the height and the child div will stay in place. And the parental diva needs to be given a position: relative.
.parent {
position: relative;
background-color:black;
width: 200px;
height: 200px
}
.child {
position: absolute;
background-color: red;
width: 50px;
height: 50px;
bottom: -25px;
right: 75px;
}
<div class="parent">
<div class="child">
</div>
</div>
Use translateY(50%) combined with bottom:0. This will work for any height including child and parent element:
.parent {
position: absolute;
background-color:black;
width: 200px;
height: 200px
}
.another-parent {
position: relative;
float:right;
background-color:black;
width: 200px;
height: 70px
}
.child {
position: absolute;
background-color: red;
width: 50px;
height: 50px;
bottom: 0;
transform:translateY(50%);
}
<div class="parent">
<div class="child">
</div>
</div>
<div class="another-parent">
<div class="child">
</div>
</div>
Use percentages for perfect and responsive output.
.parent {
position: absolute;
background-color:black;
width: 200px;
height: 200px
}
.another-parent {
position: relative;
float:right;
background-color:black;
width: 200px;
height: 70px
}
.child {
position: absolute;
background-color: red;
width: 50px;
bottom: -20px;
left: 35%;
}
<div class="parent">
<div class="child">
</div>
</div>
<div class="another-parent">
<div class="child">
</div>
</div>
Let me know if it works for you.
This, this, and this question were similar but did not help.
The goal is to center an element under its parent using percentages, not absolute values. This way, position values do not need to change if sizes change.
The hover element below is centered under outer, but positioning requires absolute values that depend on the sizes of hover and outer. If either change, the position values must change.
Can centering underneath a parent be achieved with percentages?
Codepen: https://codepen.io/anon/pen/dadjpg
<div id="outer">
<div id="hover"></div>
</div>
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
margin: auto;
left: 75px;
bottom: -50px;
}
You can also use top:100%; left:0px; right:0px; margin:0px auto;
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left:0px;
right:0px;
top:100%;
margin:0px auto;
}
<div id="outer">
<div id="hover"></div>
</div>
You can use top:100% to move the element to the bottom then simply combine left:50% with translateX(-50%) to center:
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left:50%;
transform:translateX(-50%);
top:100%;
}
<div id="outer">
<div id="hover"></div>
</div>
Same logic considering bottom:0
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
bottom:0;
left:50%;
transform:translate(-50%,100%);
}
<div id="outer">
<div id="hover"></div>
</div>
Another idea is to consider flexbox to center inside the element then translate to make the element outside:
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
display:flex;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
margin:auto auto 0;
transform:translateY(100%);
}
<div id="outer">
<div id="hover"></div>
</div>
#container {
width: 200px;
height: 200px;
background:red;
overflow: auto;
position: relative;
}
#absolute {
position: absolute;
top: 50px;
left: 0;
width: 400px;
height: 20px;
background: yellow;
}
<header>Header</header>
<div id="container">
<div id="absolute"></div>
</div>
<footer>Footer</footer>
I have an absolute positioned yellow bar here that is wider than the parent box. I'd like the full bar to be visible and not be clipped by the parent dimensions. Is it possible to do that using some combination of CSS properties?
I'm aware that removing overflow:auto from the parent gives the effect I am asking for but removing that is not an option, unfortunately.
I added another wrapper that has the overflow: auto; and removed it from the main container
#container {
width: 200px;
height: 200px;
background: red;
position: relative;
}
.subcon {
overflow: auto;
}
#absolute {
position: absolute;
top: 50px;
left: 0;
width: 400px;
height: 20px;
background: yellow;
}
<header>Header</header>
<div id="container">
<div class="subcon">
<div id="absolute"></div>
</div>
</div>
<footer>Footer</footer>
<header>Header</header>
<div id="container">
I have an absolute positioned yellow bar here that is wider than the parent box. I'd like the full bar to be visible and not be clipped by the parent dimensions. Is it possible to do that using some combination of CSS properties?
I'm aware that removing overflow:auto from the parent gives the effect I am asking for but removing that is not an option, unfortunately.
<div id="absolute"></div>
</div>
<footer>Footer</footer>
#container {
width: 200px;
height: 200px;
background:red;
overflow: auto;
}
#absolute {
position: absolute;
top: 50px;
left: 0;
width: 400px;
height: 20px;
background: yellow;
}
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.