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>
Related
Why my nested sticky element with left: 0 does not stick while the nested element with top: 0 sticks normally?
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.container {
width: 600px;
height: 1000px;
}
.sticky-left {
position: sticky;
left: 0;
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
Let's add some border and we will clearly see what is happening:
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.scroll > div {
border:2px solid green;
}
.container {
width: 600px;
height: 1000px;
border:2px solid red!important;
}
.container > div {
border:2px solid green;
}
.sticky-left {
position: sticky;
left: 0;
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
As you can see, the nested sticky elements are both having their width equal to parent width (since they are block element) so there is no room for the left-sticky to have any sticky behavior1 since it has width:100% unlike the top one that can still stick because its height is less that the parent height.
For the non-nested elements I think it's clear.
Make the element inline-block or reduce the width and you will have a sticky behavior:
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.scroll > div {
border:2px solid green;
}
.container {
width: 600px;
height: 1000px;
border:2px solid red!important;
}
.container > div {
border:2px solid green;
width:150px;
}
.sticky-left {
position: sticky;
left: 0;
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
1 A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.ref
In your case you were always meeting the opposite edge.
As per the MDN documentation on position: sticky, the top, right, bottom, and left properties determine the final location of positioned elements. My guess is that in order for it to be stickied from the top, it needs to also contain top: 0. The snippet I added seems to work.
.scroll {
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.container {
width: 600px;
height: 1000px;
}
.sticky-left {
position: sticky;
left: 0;
top: 0; // Add this so it sticks to top
}
.sticky-top {
position: sticky;
top: 0;
}
<div class="scroll">
<div class="sticky-top">sticky-top</div>
<div class="sticky-left">sticky-left</div>
<div class="container">
<div class="sticky-top">sticky-top-nested</div>
<div class="sticky-left">sticky-left-nested</div>
</div>
</div>
Is it possible to make a div absolute to a specific relative div rather than just the parent?
For example. I have a div that's contained inside of a row. But, I want it to be absolute in the section rather than the row. Both divs are positioned relative because of a WordPress themes styling. If I use position absolute it will just make it absolute to the row.
How can I get around this issue?
.section {
width: 100%;
height: 100%;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
right: 0;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
This is not how positioning works. A div or any other element is relevant to its parent regarding its positioning. In case you want to position an element inside the section that you have, it's better to construct your code as follows:
<div class="section">
<div class="absoluteDiv">
</div>
<div class="row">
</div>
</div>
You could find some more examples here
Hope it helps,
Konstantinos.
Although you can not make a div absolute to a specific div, one way to get the results you are looking for is to add overflow:visible; to the row and left:100%; to content container. I changed the section height to 300px for demonstration purposes but it will behave the same with 100%.
.section {
width: 100%;
height: 300px;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
overflow:visible;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 100%;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
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>
I'm trying to place text over an image (simplified as a div here) that I can blur and set other filters on, but I want that text to be relatively positioned so that the parent container can resize.
#container {
position: relative;
width: 100%;
background: red;
height: 300px; /* For display sample purposes--no height is defined in production */
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
opacity: 0.5;
}
.content {
color: white;
font-weight: bold;
font-size: 3em;
}
<div id="container">
<div class="bg"></div>
<div class="content">
asdasdasdasd
</div>
</div>
This causes the blue bg to be displayed over the content. I know that I can have the content div be also absolutely positioned, but then the container's height won't change.
How can I accomplish what I'm looking for?
Fiddle
Add following style to .content class
.content {
position: relative;
z-index: 1;
}
I think this stuff will work for you and i hope it will be helpful to you. just try it.
#main {
position: relative;
height: 200px;
width: 200px;
border: 2px solid #aaa;
text-align:center
}
#center {
position: relative;
left:25%;
top:25%;
border: 1px solid #aaa;
width: 100px;height: 100px;
text-align:center
}
div { height: 50px;width: 50px;}
.blue { background-color: lightblue; position: absolute; }
.green {background-color: lightgreen; position: absolute; right:0}
.yellow {background-color: yellow; position: absolute; right:0; bottom:0 }
.red {background-color: lightpink; position: absolute; bottom:0;}
<div id="main">
<div class="blue">blue</div>
<div class="green">green</div>
<div class="yellow">yellow</div>
<div class="red">red</div>
<div id="center">
<div class="blue">center-blue</div>
<div class="green">center-green</div>
<div class="yellow">center-yellow</div>
<div class="red">center-red</div>
</div>
</div>
<p>This is relative absolute using css.</p>
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.