I have 3 divs as follows:
<div class="div-1">
<div class="div-2">
<span class="wrapper">test</span>
<div class="div-3">
</div>
</div>
</div>
div-1 and div-2 have position: relative.
div-3 has position absolute.
wrapper has position absolute.
I need div-2 to be positioned relatively so that wrapper can be positioned absolutely.
Now what I need is, div-3 must be positioned absolutely in relative to div-1 and not div-2.
Any way to achieve this?
If you have made .div-3 position:absolute , it will be with respect to the parent div which in div-2 in your case. It will get aligned to the top-left corner of it. If you want to make it relative to div-1 try this:
<div class="div-1">
<div class="div-2">
<span class="wrapper">test</span>
</div>
<div class="div-3">
</div>
</div>
This will make it with relative to div-1. For further understanding of positioning you can go to this link
just set div-2 position: static
and div-1 position: relative.
that'll work
Related
I have the following HTML content. I have multiple elements (e.g., div with id = one, two, three) inside a div container which is scrollable.
In each element, I need to use CSS position 'absolute' which position related to its parent div (i.e., class='Anchor').
The problem I am having is, when I scroll the outer container, none of the divs with an absolute position moved. My understanding of position 'absolute' is it is positioned relative to its parent DIV element. How can I make those 'absolute' position move as I scroll the outer container?
<div style="overflow-y: scroll">
<div>
<div class="Anchor" id="one">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="two">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="three">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
</div>
You must set position: relative; on the parent div to get the child elements to move in relation to it.
The reality is, you can have the parent div set to any user-defined position, as long as the default static position isn't being used.
Try position: sticky on the div that you want to make float. Also beware the browser support is not that great for sticky.
I want to position divs according their placing order but they are not following each other. I want second div follow first div right after it(downwards).
<body>
<div id="first" style="display:block;width:20%;height:100px;position:relative;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
<div style="position:relative;display:block;">
Hello!
</div>
</div>
</body>
You simply should delete the position:relative style in your first of your divs.
<body>
<div id="first" style="display:block;width:20%;height:100px;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
<div style="position:relative;display:block;">
Hello!
</div>
</div>
</body>
Check here: https://jsfiddle.net/dnvabqgx/1/
Why do position:relative matters
This type of positioning is probably the most confusing and misused. What it really means is "relative to itself".
If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static;
But if you DO give it some other positioning attribute, say, top: 50p; as you don in your first div, it will shift it's position 50 pixels DOWN from where it would NORMALLY be.
--read about all the position properties here
In response to your question of 'why position:relative matters?'; position relative moves an element into normal flow, allowing it to be positioned on the web page using the offset properties like top, right, bottom and down.
I am using twitter bootstrap, and I have the following code:
<div class="row clearfix">
<div class="col-md-12 column">
<img src="img/map.jpg" id="map" />
<a id="modal-786791" href="#modal-container-786791" role="button" class="btn" data-toggle="modal"><img src="img/pin.png"/></a>
</div>
</div>
CSS:
#map{
position: absolute;
}
#modal-786791 img{
position:relative;
}
I need to put the pin on top of the map. So I positioned the map absolutely and the pin relatively.
The problem is that when I put #map in an absolute positioning, all the content that follows the parent div is overlapping it. Here is a screenshot to show you the result:
What is it that I am doing wrong?
Thanks
What happens if you use z-index:99999; in de css
Applying position:absolute takes the element out of the normal flow, Hence when you absolutely position the map, the static elements following it will act like the map isn't there at all.
Absolutely positioned elements are positioned relative to the relative parent. In the current markup, #map is not a parent of the pin, but a sibling, So add an id to the <div> containing it, for example
HTML
<div class="row clearfix">
<div id='mapContainer' class="col-md-12 column">
<img src="img/map.jpg" id="map" />
<a id="modal-786791" href="#modal-container-786791" role="button" class="btn" data-toggle="modal"><img src="img/pin.png"/></a>
</div>
Then you can position the container as relative (So that it'll stay in normal flow) and pin as absolute.
#mapContainer{
position:relative;
}
#modal-786791 img{
position: absolute;
}
I was just wondering if something like this would be possible:
<div id="inventory" >
Blabla <BR/>
Blabla
<div id="empty_slots">
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div style="clear: both"> </div>
</div>
</div>
JFiddle link
I'd like to have the #empty_slots div to be placed at the bottom of #inventory (without changing the position to absolute).
So far it only works when I set the position to absolute. But this is then causing issues
when I place more elements to the div. They're all being placed behind the #empty_slots instead of just expanding the #inventory height.
You've got it almost right, you should place the parent (#inventory) relative, which you already have. And place the child (#empty-slots) absolute instead of relative.
You said you didn't want to place it absolute, but without it, you can't achieve what you want. Is there are reason why you don't want it absolute?
Check the updated Fiddle.
Is there a way to do it?
If I do it like this:
<div id="container" style="width:500px;">
<div id="content" style="position:absolute;width:100%;">
</div>
</div>
Then the content div will have the width of the browser window, instead of the 500px from the parent container div.
Always give position:relative to the parent if it's child have position:absolute;. Give position:relative to your #container DIV. Write like this:
<div id="container" style="width:500px;position:relative">
<div id="content" style="position:absolute;width:100%;">
</div>
</div>
Just set the position of #container to relative. Check out this jsFiddle for a demo.