Before giving negative vote or placing the question as duplicate, please read the issue first.
I'm having some issue with putting one div under another. I know that make people have asked this question here and I've read all of them and also tried everything out, but none of them worked for me.
Everyone days to give position: relative to to div and then give one higher z-index and another lower. None of them worked for me. So, I'm here for help.
In my project (http://loadtest.isaumya.com/) I have 2 divs i.e.
<body>
<div class="conteiner">blah blah blah</div>
<div id="particle-js"></div>
</body>
I want to put the <div id="particle-js"></div> behind of container, but nothing is working out. So please help.
You have ordered them badly:
<div class="container">...</div>
<div id="particles-js">...</div>
invert positions:
<div id="particles-js">...</div>
<div class="container">...</div>
makes sense since you want your full-screen canvas particles to be naturally z-index lower than the latter #container. Precedence rule.
also add this styles to your particle-js element:
#particles-js{
position:absolute;
top:0;
width:100%;
height:100%;
}
If the above still does not helps (it should) add:
.container {
position: relative;
z-index: 1;
}
Make your canvas element display:block;
Result image:
its just a very simple concept you need to remember about position in css
A relative positioned element is positioned relative to its normal
position
An absolute position element is positioned relative to the first
parent element that has a position other than static.
JSFiddle
this is how you may solve this problem:
<body>
<div class="container">blah blah blah</div>
<div id="particle-js"></div>
</body>
and the css
div {
width: 100px;
height: 100px;
}
.container {
position: absolute;
background-color: blue;
z-index: 1;
}
#particle-js {
position: absolute;
background-color: red;
}
make the z-index higher to wichever element you want a be displayed at the top
Related
please don't mark this question as duplicate because I don't think anyone asked this before. I know that position:absolute takes the element out of the flow, but that doesn't explain why its parent's height collapses to 0. If I have this markup:
<div class="container">
<div class="inside">
some content
</div>
</div>
Then I add these styles:
.container {
background-color: red;
position: relative;
}
.inside {
background-color: green;
position: absolute;
}
Applying absolute positioning to the child will make the container's height collapse to 0. The only way to make it visible is to apply height, but not in percentages.
Does anyone know why this happens?
And is there a way to make it not happen?
Thanks in advance
I am trying to understand why a div with display:block will not sit under another div with display:block
My mark-up is this:
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top:0;
left:0;
}
.container .text-left{
position: absolute;
top:35rem;
left:35rem
}
.container .text-right{
position: absolute;
top:35rem;
right:35rem
}
<div class="container" >
<img src="/image1.jpg" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="/image2.jpg" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I am trying all sorts of stuff to make this work - overflows etc - but can't seem to get the second display block div to sit under the first.
EDIT: It seems that if you put position:absolute element/s inside a position:relative element - that may have height due to that element being an image - the absolute element/s removes this height. So you need to add it back in as height: X.
But why??
Is this due legacy mark up - using absolutes in ways not designed for?
Why would the browser not take into consideration the image height as default. And we could override this if needed.
Can anyone please enlighten me?
thanks
The reason you have lost height is because position:absolute; removes element from the flow, therefore your parent container won't be able to use it to work out its height. It's not legacy markup, it's part of the scope.
A quick excerpt from CSS-Tricks
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
If for whatever reason you are required to have that specific element as position:absolute; your next best bet would be to adjust the parent container using JavaScript/jQuery, however that might be a bulky fix.
My suggestion would be to try and achieve your preferred layout without using the absolute positioning, and then if you get stuck, post another question here explaining your desired layout and current code trying to achieve it.
EDIT
That being said, if the mentioned JavaScript/jQuery solution does not sound to bulky to you, you could try the following:
$('.container').each(function(){
$(this).css({
'padding-top': $(this).find('img').height()+'px'
});
});
This will add padding-top to the container based on the image size. Alternative, you could add an empty div below the image and adjust its height based on the image size.
To make it work just make the img and test_* position to relative instead of absolute. Why ? Position absolute removes element from the flow, that means that because all your container's childrens are absolute, it is like your container has no content, that's why it collapse.
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: relative;
top:0;
left:0;
}
.container .text_left{
position: absolute;
top:90%;
left:5%;
color: #fff;
}
.container .text_right{
position: absolute;
top:90%;
right:5%;
color: #fff;
}
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I don't really know how to approach this, but this is what I'm trying to do, placing the white arrowbox:
I know how to do an arrowbox, but placing it like that is a mystery to me. At the moment I have two sections, upper and lower, and then tried giving the box an absolute position, but didn't work.
How should I approach this problem? I'm sure there is an easy solution, but I'm not that experienced with CSS.
didn't understand your question very well myself. IF you are trying to position your box in the middle of the lower blue container with: position:absolute I would try this myself
.box {
height:100px;
width:300px;
background-color:red;
position:absolute;
top:-50px;
left:50%;
margin-left:-150px; /*this has to be half your box width negative margin*/
}
Don't forget to add position relative to your blue div (or fixed, or absolute... just not default static). A fiddle as an example ( I add css box arrow just in case you need it): http://jsfiddle.net/j5a0227s/1/
Clearly misunderstood your question. Please see the updated JSFiddle.
This places a green block below the middle circle, but by giving it the position: absolute, you can change the location with margin-top. I don't know how this reacts in responsive websites, you might want to tweak it a bit.
Edit2: Even better is to place the white block in the div you have above the circles. See this updated JSfiddle.
HTML
<div class="main">
<div class="container0">
<div class="hover2"></div>
</div>
</div>
CSS
.main {
margin-top:100px;
}
.hover2 {
height: 50px;
width: 100px;
background: green;
margin-left:180px;
position: absolute;
margin-top:60px;
}
.container0 {
background: purple;
width: 100%;
height:100px
}
Wrap your two sections with a div and take a close look at this interesting article: Centering in CSS: A Complete Guide.
fiddle
In simple case of overlap of divs
<div id='first'>
first
</div>
<div id='second'>
second
</div>
css:-
#second {
margin-top: -18px;
background: #fff;
}
How do you ensure the second div shows over the first div, with #first not visible (in overlapping region)?
I do not want to make any div position:absolute.
You will want to use z-index. Make the second one a higher z-index
Like Chausser said, use z-index and also position:relative;
http://jsfiddle.net/xreVf/4/
#second {
position:relative;
z-index:2;
}
When I assign a percentage height in the following div, why does it get out? Thanks you in advance.
HTML:
<div id="div1">
Test<br/>Test<br/>Test<br/>Test<br/>
<div id="div2">Test</div>
</div>
CSS:
body{
margin: 0
}
#div1{
position: absolute;
width: 200px;
height:100%;
right: 0;
background-color: #467
}
#div2{
width: 50%;
height: 99%;
background-color: black;
color: white
}
Well, the reason why #div2 extends below #div1 is because in addition to being 100% the height of its parent, #div2 is also pushed down by the four lines of text above it - so it extends exactly that distance outside of #div1.
How to solve this, then? Well...I can offer a CSS solution, but it's not very flexible (a solution that employs JavaScript would definitely be more scalable, and less work to maintain). I modified your HTML structure slightly, so now it looks like:
<div id="div1">Test
<br/>Test
<br/>Test
<br/>Test
<div id="div3">
<div id="div2">Test</div>
</div>
</div>
To clarify my changes, I added the #div3 element around #div2. Now, for my CSS, I just added this definition for #div3, and modified the body CSS to:
body {
margin: 0;
line-height:1.3em;
}
#div3 {
position:absolute;
top:5.2em;
bottom:0;
left:0;
width:100%;
}
This approach requires that you know how far from the top of #div1 you want #div3 (and its child #div2) to start, which by extension requires you to know exactly how tall those four lines of text are. Since browsers often render text with slightly different line heights, I specified one for the <body>. After that, it is a fairly simple matter of multiplying that line height by the number of lines of text (four in this case), and setting that as the top attribute.
Here's a JSFiddle to demonstrate what this achieves. I hope this answer was clear, and is what you're looking for! If not, let me know and I'll try to help further. Good luck!
it gets out because of the overflow property you are missing. Set it to hidden on #div2 ok?
good question. Test<br/>'s count as extra size. same if you use padding, it counts extra size. You can use position absolute to child element. I fixed the problem. check this fiddle
in div1, use position: fixed; instead of position: absolute;
jsfiddle