I am trying to understand css positioning.
What I am trying to accomplish is : I want that when I set a div position , div's after it, change position respect of the first div moved ,without overlapping them.
Let's make an example :
HTML
<div class="wrap">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
CSS
.wrap{
position: absolute;
background-color:yellow;
width:500px;
height:600px;
margin:0 auto;
}
.box1,.box2,.box3{
position: relative;
width:450px;
height:150px;
margin:0 auto;
}
.box1{background-color:red; top: 100px;}
.box2{background-color:green;}
.box3{background-color:blue;}
Now , when I set , e.g top:100px on box1 , it goes 100px from the top, but box2 and box3 still remains there. I want that when i set top position on one of the div they "suffer" the change of the set position , and not overlap or get overlapped by other divs
I tried, as you can see, with position: relative but It did not reach my goal.
Sorry if I explained it better , it's hard to me to explain it in English.
top property (as left, right and bottom) is used to positioning absolute elements only.
giving this property to the element probably gives it absolute behavior.
to position a relative element you should use margin-top instead.
HERE is a working fiddle
Use margin-top instead of top. Top/Bottom/Left/Right changes the position from where it would normally be, and therefore it doesn't affect the rest. Margins will affect the rest too.
http://jsfiddle.net/eux4C/3/
.box1{background-color:red; margin-top: 100px;}
The css top property can be used only on elements with position absolute (as talked in chat :-).
For a relative positioned element you should use margin-top property like:
.box1 {background-color:red; margin-top: 100px;}
Here is a working fiddle: http://jsfiddle.net/IrvinDominin/eux4C/4/
It sounds like you really want to preserve the standard box model, rather than ignoring it.
Don't set a position: relative, and use padding
-top or margin-top to add the extra space.
Related
I am trying to have an arrow fixed to the bottom of a div section , but for some reason its not working ,
here is my html code:
<section>
<div style="margin:auto; text-align: center; position:relative; width:61px">
<a class="scroller-arrow" href="#offset2"></a>
</div>
</section>
The CSS code :
section {
padding: 10%;
margin: 0 auto;
background-image: url("/images/text-bar-strip.png");
background-repeat: repeat-x;
height: 393px;
}
.scroller-arrow
{
background-image: url("/images/down-arrow.png");
cursor: pointer;
display: block;
height: 61px;
margin: 0 auto;
width: 61px;
position:fixed;
bottom:-11px;
}
its always showing at the bottom of my screen not the bottom of the section ?
Could you help me much appreciated :)
After clearing things up in the discussion, I believe this is what you're looking for: http://jsfiddle.net/WBF6s/
Changes include:
Removing the div.
Setting position:relative on the section.
Setting the a to be position:absolute and display:inline-block.
Setting the a to left:0, right:0, bottom:0, and margin:0 auto.
position:fixed, places the element relative to the window.
With position:absolute, the element will be moved relative to the nearest positioned parent, which means that the container must have itself a position property set.
What we usually do is make the container relatively positioned, by setting its position property to relative.
So, you should make your section or your div relative, and your arrow absolute.
as an FYI, position:fixed is reserved for placing an element on the screen regardless of the other elements there. It will fix itself to the window no matter what. If you would like it to be stuck at the bottom (or top or anything) of an element, you need to use position:absolute. The caveat with position:absolute is that you will always need its parent to have a position on it. The most non-destructive way is to give your parent position:relative and this will make sure that the parent is always in the same spot.
I've made a very quick jsfiddle to show you what's wrong:
http://jsfiddle.net/AuGe2/
When you want to position something to the bottom of an element, you need it to be
.arrow{
height:40px;
width:40px
position:absolute;
bottom:0;
left:50%;
margin-left:-20px //Or half the width of the element
}
Notice the left:50% and margin-left:-20px This is what centers an absolute element in a box. You are moving the element 50% of the way over of the parent's width, then you need to back-track a bit because it's moving the left-most side of the element. You backtrack by subtracting the same margin at half the size of the element. You can do the same with top as well.
Consider the following very simple code:
<div id="parent">
<div id="child">
Test it
</div>
</div>
and the CSS:
#parent{
position:relative;
margin-left:200px;
color:#FFF;
}
#child{
position:fixed;
top:30px;
background-color:red;
}
I supposed child div would not inherit margin-left from parent div since child breaks the normal flow. However, not only does it inherit the 200px margin; moreover, if I try to assign margin-left:50px to child div the result is a left margin of 250px!! Why that happens and in what way may I change it?
Thank you
Jsfiddle:http://jsfiddle.net/rCMx2/
The reason - unless you specify horizontal positioning axes (left: ... or right: ...), the child element, even if it is a fixed positioned one, will still be horizontally positioned like it would have been without being fixed positioned.
Same for vertical axes (top: ... or bottom: ...) and its vertical position.
It would just not move from that initial position, since it is a fixed positioned element.
So, in other words, declaring position: fixed and top: ... does not change the horizontal position of the element, only its vertical. Its horizontal position is still its natural one.
The solution - add left: ... or right: ... to the fixed positioned element in order to 'disconnect' it from its initial horizontal position.
You are adding a margin of 50px on top of the margin for your parent. This might help you visualize what is happening:
#parent{
margin-left:200px;
color:#FFF;
border:2px solid #f0f;
overflow:visible;
}
#child{
top:30px;
background-color:red;
margin:20px;
border:2px solid #0f0;
}
Try that. Can you more easily visualize what is happening now? Note that I removed the "position" attributes.
In order to achieve a more specific result, I need to know WHAT you want your final layout to look like.
He is taking the position of 200px div parent who is on. As the div child is fixed, she is taking on the father as parameter to leave the stream.
You can remove the div son of his father, separating from them.
And align the div fixed to left: 50px out instead of using margin-left: 50px.
Hope this helps.
Here's an example: http://zip.net/bjmY23
This is how i designed the layout for my header
<div id="DivHeader">
<div id="DivTop">
</div>
<div id="DivBottom">
</div>
</div>
Initially i had set the top property for the DivBottom as 35px.At that time i did not have DivTop. So now, after adding it, the top for the DivBottom has been calculated from the new child(DivTop) as DivTop's height + DivBottom's top. As a result the layout got collapsed like this. I need to place DivTop without affecting the DivBottom's Top, Any ideas.?
[Note : I did not use absolute positioning for my divs, Because in that case margin:0 auto wont work.]
You're using relative positioning, for which this is the expected behavior. See the W3 on relative positioning:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning.
So if you insert something above a relatively positioned element, it will first position according to the "normal flow", and then be repositioned according to your CSS.
You'll need to change the position to another value if you want the behavior you specified.
You would need to use absolute positioning:
#first
{
position:absolute;
left:50%;
margin-left:-5px; /* half the width value */
width:10px;
height:10px;
background-color:yellow;
}
http://jsfiddle.net/3u3gz/1/
For example: http://jsfiddle.net/MYvYy/182/
I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.
I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.
I know it can be done with js. But I don't really like adjusting style with scripts.
So I was wondering if it is possible to be done using CSS?
I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height.
So your HTML will look like this.
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
Then we need to add the "ghost div" CSS like so:
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
It's not possible with CSS alone.
Layout flow:
An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.
This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.
Fixed height:
If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.
If position:absolute has to be used and fixed height is not an option, use JavaScript.
I only can provide you with Javscript fix for this using jQuery lib.
let me know if you use it or not,
$('.outer_box').height($('.inner_box').outerHeight());
This line will fix the outer_box height
I have tried the Fixed height method, but on small screens it is overlapping. So I have solved this problem by setting overlay background layer to seperate division and content to another division.
<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
<div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
<div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>
I have uploaded the code on Codepen: https://codepen.io/shahbaz8x/pen/GRjEBze
I fixed it by changing the position property of div.inner_box into
position:relative
if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.
I have to create a div that should look like
<div id=1>
<img></img>
<div id=2></div>
</div>
the div with id 2 should appear at bottom-right corner of image, and the size of image is not fixed what should be the css applied to div with id=2
div with id =1 has no position defined so uses default and same is with image and i cannot change these
only div with id=2 is editable to me. Please suggest something
If you need to position the second DIV on top of the first DIV, then the best solution would be to position the first DIV with position:relative; and then use absolute positioning on the second DIV. The first DIV would have to have a fixed width or to be floated to limit it's width to that of the image.
If you have no way to control the first div, you are in a bit of a tight spot. You still need to make sure that the first div has the same width as the image, either by setting width explicitly or by using a float. You could then position the second DIV with negative margin and using position:relative in conjunction with z-index to make it flow on top of the image. But that would mean you'd have to know the height of the second DIV to make up for that exact amount using negative margin. It would work, but the solution wont be as robust as the first.
If you just need to have the text below the image it's a bit easier, just using plain old floats. I've coded up a very basicc version of all the three scenarios here: http://jsfiddle.net/laustdeleuran/7CnSh/
I hope it's useful.
If you cannot edit the CSS for div #1, you're sort of screwed.
If you could just add {position:relative} to that div, you'd be in business. Absolute positioning will target the first parent with 'Relative' positioning. Since the default of div 1 is 'Static'...Positioning won't work.
'Float' might work, div 2 would technically need to come before div 1 - thus causing div 1 to inherit the float of div 2; however, that would also stack your image atop div 2 rather than below it. ... So Float is out as well.
IF you can add CSS to div 1 and div 1 img, then an easy fix is this:
* { margin:0; padding:0 }
#one {position:relative; text-align:right;}
#two {position:absolute; bottom:0; right:0}
Good luck...
I think you are looking for float style.
Using numeric ids is a bad idea, so let's say you've called your divs div1 and div2.
As you can't style #div1 or the image, the only thing you might try is setting a negative margin on #div2. Try either one of:
#div1 { display: inline-block; width: 100px; margin-left: -100px }
Or, simply:
#div1 { margin-top: -100px }
Where the 100px values are just arbitrary and you'll need to decide on appropriate values depending on what you're putting in #div2
First, some valid HTML. But I guess that wasn't your real HTML?
<div id="div1">
<img [..] />
<div id="div2"></div>
</div>
You could this with position: absolute and negative margins.
#div1 { display: table; position: relative; }
#div2 {
position: absolute;
width: 50px;
height: 50px;
margin-top: -50px;
right: 0;
}
display: table should make the first div match the width of the image. position: relative so the second div will position itself relative to first div.
This might work (not sure of relative+table). But I haven't tested it. If it does't work, I suggest that you work with JS to position the second div, it's very easy.
try this:
<div id="d1">
<img src="https://encrypted.google.com/images/logos/ssl_logo_lg.gif"></img>
<div style="margin-left:225px;margin-top:-25px;z-index:1000;position: relative;" id="d2">Your Text</div>
</div>
you can play with the margin-left and margin-top