I'm using particles.js and am trying to fill a relative section with the absolutely positioned particle content.
The problem I'm having is that the height of the relative section is dynamic and I can't seem to get the the absolutely positioned inner div to only fill the relative container.
Been searching and trying various things but haven't found any solutions. Here is a jsfiddle showing the issue: http://jsfiddle.net/awwester/3f6vkef7/1/
<div class="container">
<div class="inner">
</div>
</div>
.container {
height: 200px;
background-color: red;
}
.inner {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
}
and I can't seem to get the the absolutely positioned inner div to only fill the relative container.
The key is adding the property position: relative to your container.
Try the following example:
.container {
height: 200px;
background-color: red;
position: relative;
}
.inner {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
<div class="container">
<div class="inner">
</div>
</div>
you forgot to set position: relative; on .container so .inner apply to body/html
.container {
height: 200px;
background-color: red;
position: relative;
}
.inner {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
}
<div class="container">
<div class="inner">
</div>
</div>
Related
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.
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>
#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;
}
the child's height is more than it's parent div. Do we have some trick for this? or alternative solution.
i just simplified the codes. i also have codepen here
you see it in the codepen that the child is overlapping to footer. I want the footer to go below the child.
html
<div class="wrapper">
<div id="sibling-1">
<div class="child"></div>
</div>
<footer id="sibling-2"></footer>
</div>
css
.wrapper {
height: 500px;
background: pink;
}
#sibling-1 {
background: grey;
height: 200px;
width: 300px;
position: relative;
}
.child {
position: absolute;
background: green;
width: 250px;
height: 300px;
}
#sibling-2 {
width: 300px;
height: 200px;
background: blue;
}
I need to overlay a child div to cover it's parent div when my drag and drop event starts, but I can't get the child div to be on top of the parent using z-index.
Here is my HTML:
<div class="some-element">
<div class="parent-div">
<div class="child-div">
<p>This should be over the parent</p>
</div>
<h1>Some text lorem ipsum</h1>
</div>
<div class="another-div">
<p>lorem ipsum</p>
</div>
</div>
And here is my CSS
html, body {
height: 100%;
width: 100%;
}
.some-element {
background-color: blue;
width: 100%;
}
.parent-div {
background-color: red;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.child-div {
background-color: green;
height: 100%;
position: relative;
width: 100%;
z-index: 999;
}
Here is a CodePen demonstrating my issue: https://codepen.io/leofontes/pen/LkgJpo
I thought by using z-index and position relative I would be able to achieve what I wanted, but it doesn't seem to stack on top of the parent. Any idea on what is going on?
For .child-div change the positioning to absolute.
.child-div {
background-color: green;
height: 100%;
position: absolute;
width: 100%;
z-index: 999;
}
html,
body {
height: 100%;
width: 100%;
}
.some-element {
background-color: blue;
width: 100%;
}
.parent-div {
background-color: red;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.child-div {
background-color: green;
height: 100%;
position: absolute;
width: 100%;
z-index: 999;
}
<div class="some-element">
<div class="parent-div">
<div class="child-div">
<p>This should be over the parent</p>
</div>
<h1>Some text lorem ipsum</h1>
</div>
<div class="another-div">
<p>lorem ipsum</p>
</div>
</div>
Relative positioning will move something relative from it's current location but continue to take up space in it's original location. Take a look at the example below. When I use relative positioning to move the "text" segment, notice the line of text doesn't collapse down to a single space between "Some" and "here."
span {
position: relative;
top: 20px;
left: 20px;
background-color: yellow;
}
<p>
Some <span>text</span> here.
</p>
When you set an element to absolute positioning you take it out of the normal document flow. Meaning they don't take up space as far as other non absolute positioned elements are concerned. This is why you need to use height: 100%; and width: 100%; to make sure the child element matches the dimensions of the parent when using absolute positioning.
By default padding will add to the 100% dimensions. To prevent this use box-sizing: border-box;.
An alternative to height: 100%; and width: 100%; is to use top: 0; right: 0; bottom: 0; left: 0;. That will stretch the child element to the edges of the parent element.