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.
Related
Is there an easy way (without manually setting any heights) to make sure a parent element always wraps/contains a child, even if the child has been relatively positioned?
<div style="background-color: red;">
<div style="background-color: pink; position: relative; top: 20px">
one.
</div>
</div>
<div>
two.
</div>
In the example above the "one." div flows out of its parent and overlaps/hides the "two." div, but my desired effect is to have the parent div contain the whole of the child and the "two." element flowing underneath.
top is used to position element so that it has no effect on the surrounding elements. Use margin-top if you want to affect the parent as well, otherwise top doesn't affect the other elements.
<div style="background-color: red; display: flex;">
<div style="background-color: pink; position: relative; margin-top: 20px">
one.
</div>
</div>
<div>
two.
</div>
How would you position elements in a relatively positioned div, and keep them the same distance apart without going out side of the box? I have a relatively positioned div and inside of it is a div(nameTabs) that spans 100% of the width. Inside of that div is taskstabtext, and tasksaddbox. Tasks tab text is positioned where it is and stays there. Button does not. What would be the cleanest way of positioning the two in a flexbox responsive div? Thanks
<html>
<body>
<div id="box" style="display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class="nameTabs tasksTab">
<div class="tasksTabText">
<p class="tasksBtnText">Name</p>
</div>
<div class="tasksAddBox">
<p class="tasksAddBtn">Last</p>
</div>
</div>
</div>
</div>
</body>
</html>
LINK - https://jsfiddle.net/9rqd9ot9/15/
I figured it out. For anyone with a similar issue, just use the justify-content:space-between;rule. It seperates the two and then you can set their margins from the edge.
LINK- https://jsfiddle.net/9rqd9ot9/38/
I have a div surrounding multiple divs. The border of parent div is not covering all child divs as shown in the fiddle. Can anyone tell what is the issue here?
<div style="border:1px dashed gray;">
<div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:50px;font-size: 10px">Some content</div>
<div style="position:relative;top:60px;background-color:#E6E0EC">
<div class="glyphicon glyphicon-remove"></div>
</div>
</div>
JSFiddle link
You are using position: relative on the divs not surrounded by the border. The relative position property moves the contents of the element but keeps the reserved space of the element in the normal flow.
If you want to achieve the same layout with a border around everything it is best to use the marginproperty. I updated your jsfiddle to show an example
JsFiddle
Well there is no need for position relative, in all the child divs, just remove those tags.
Using top to specify the spacing is not a good idea in a case like this. It will be fragile. Let the elements make room for themselves and let the box model make space in the parent. To do this use margin-top instead.
Fiddle: http://jsfiddle.net/markm/rmvneo88/
I'm pretty much trying to copy what you see in the following picture. I have three sections. Between section 1 and section 2 (the blue section) you can see the white arrow-box. That's what I can't place properly without messing things up.
Now I already got this "working" by placing the arrow box inside the blue section, and then gave both the arrow-box and the blue section absolute positions, and then gave the arrow box some minus margin from top. The problem with this is, that for some reason I can't create section 3 that is supposed to come after the blue section. I can't place anything under the blue section if its position is absolute. If I give the blue section a relative position, things obviously start working normally again, but then the arrow box gets out of place and something like this happens:
My code looks something like this, HTML:
<section id="first-section">
<!-- bunch of stuff here -->
</section>
<section id="blue-section">
<div class="arrow_box">
<p>How can I help you?</p>
</div>
</section>
<section id="third-section">
<!-- More stuff here -->
</section>
CSS:
#blue-section {
position: relative;
}
.arrow_box {
position: absolute;
width: 500px;
height: 100px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
margin-top: -50px;
}
OK, then here you go:
HTML
<section class="container" id="first-section">
<!-- bunch of stuff here -->
</section>
<section class="container" id="blue-section">
<div class="arrow_box">
<p>How can I help you?</p>
</div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
</section>
<section class="container" id="third-section">
<!-- More stuff here -->
</section>
CSS:
.container{position:relative; background:#ccc; padding:40px; width:100%; height:auto; min-height:100px; text-align:center;}
#blue-section{background:#06c}
.arrow_box{position:absolute; background:#f9f9f9; position:absolute; top:-50px; left:50%; margin-left:-100px; height:100px; width:200px;}
.col{width:30%; padding:1%; display:inline-block;}
.col img{width:200px; height:200px; border-radius:50%;}
As you can see, you weren't that wrong, you just need to understand that absolute positioning requires a relatively positioned div in order to be positioned itself.
See the possible values so you understand (from Mozilla MDN)
static
This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
absolute
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.
sticky
The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.
And if you made it here, you get a free fiddle
<body>
<!-- //take it as example, it may help u, just make the arrows boxed div child of blue div ,
//i ll call upper white section as white as give it white as id, arrow boxed as box,blue as blue
-->
<div id="container">
<div id="upper">
<!--//content of this div;-->
</div>
<div id="blue">
<div id="box" style="position:relative; top:-100px; z-index:10000; margin:0 auto; width:40%;">
<!-- // adjust top attr.-->
</div>
<!--//here blue sectiions content is inside lower part.-->
<div id="lower" style="margin-top:200px">
<!--//try as much u want to space to be below thw box;-->
</div>
</div>
</div>
</body>
I have a div on my homepage, not positioned, it holds the main image. On top of this main image I have a container which holds my search bar. I've positioned this container position:relative top:-500px; so that it appears over my main image.
I then have another 2 containers which come next, but if I do nothing positionally with them, they appear after a big vertical space, so I've had to position:relative and add a minus top to. I have to keep doing this top:-300px or whatever because if I don't a space appears beneath which I can't fill.
Now the next div down is the footer which I don't want to have to posiiton because it appears on every page. How can I get rid of the space between my featured properties and the footer?
Here's the code:
//no positioning
<div style="margin: 0 auto" class="slideshowWrap">
<div class="homeslideshow slide1">
</div>
<div class="homeslideshow slide2">
</div>
<div class="homeslideshow slide3">
</div>
</div>
//position:relative top:-500px
<div id="homecontainer">
</div>
//position:relative; top:-300px; margin-bottom:-100px;
<div id="homeBoxContainer">
</div>
<div style="clear:both"></div>
//position:relative; top:-300px;
<div id="homeFeaturedContainer">
</div>
You have a problem the way you designed your containers. When you moved everything up using position:relative and top:-300 it moves everything up, but the height from your #content is still saving the space and maintaining the height.
If you want your footer links up, add the following code
#footer {
top: -300px;
position: relative;
}
that doesn't solve your problem because you still have the big height created by your odd design. You need to go back to the drawing board and redesign your container. You don't need the position:relative and moving everything up.
I generally only set top and bottom values on absolutely-positioned elements. Try this instead:
#homeFeaturedContainer {
margin-top: -300px;
margin-bottom: -300px;
}