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
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.
I am newbie to HTML. I searched whether z-index works on relative positioned elements or not, and I found yes it works.
But the problem is when i am trying its not getting stacked.
<style>
.div0{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:1;}
.div1{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:1;}
.div2{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:2;}
</style>
</head>
<body>
<div class="div0">
<div class="div1">Text One</div>
<div class="div2">Text Two</div>
</div>
</body>
Fiddle
First of all lets refactor your CSS, you won't need width:100%; and height: auto; as width of the block level element is always auto but it takes entire horizontal space unless if it's floated or it's turned to inline-block or inline and as far as height is concerned, it's auto by default so you don't need to define it.
Secondly, if you are trying to stack the div on on another than consider using position: absolute; for the child elements instead of position: relative;, if you want to stick with position: relative; than you will need to define the top value in negative.
Demo
.div2{
position:relative;
left:0px;
z-index:2;
top: -15px;
}
But make sure that position: relative; does change the position of the element, but it reserves the space physically in the flow, whereas, position: absolute; won't.
Also, if you want to apply some same properties to your child elements, you can use selectors like
.div0, .div1, .div2 {
/* Common properties here */
}
.div2 {
/* Override common properties, or you can define unique ones as well. */
}
Update the position of .div1 and .div2 to absolute.
.div1{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:1;}
.div2{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:2;}
relative positioned elements top & left properties works from current x-y position of element. In this case, you can use negative top to stack div2 over div1.
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.
See my case is, i have to center a div [DivFirst] inside another div [DivSecond].
and i had done it by setting the following css given below,
#DivFirst
{
width:500px;
height:500px;
position:relative;
}
#DivSecond
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
after that, for a reason i had changed the DivSecond's position from absolute to relative,
as a result the design got collapsed, that is, the DivFirst's height got changed and the
inner div [DivSecond] was not centered properly.
I can go with the position absolute for the inner div, but i just need to know why this is
happening.? by the way if i am doing anything wrongly, kindly direct me in the right path.
[Note: Run the demo by setting both absolute and relative position for the inner div]
DEMO
In this case the negative top margin is pulling #DivFirst with it. You can stop this behavior by adding overflow: auto to #DivFirst.
Since you know the size of the divs involved you may want to consider just manually positioning them without trying to nudge them into place with negative margins http://jsfiddle.net/DDcfD/ :
CSS:
#DivFirst
{
width:500px;
height:500px;
position:relative;
background-color:red;
}
#DivSecond
{
position:relative;
background-color:yellow;
width:200px;
height:200px;
top:150px;
left: 150px;
}
That happens, because when you give #DivSecond position: absolute;, you position your target element relatively to its first positioned ancestor element, as long as it is not static positioned.
When you give your #DivSecond position property a relative value, you no longer position it relatively to it's ancestor element, but relatively to it's normal position, where it would be by default, which in your case means, you add 50% to the left and 'top' of it's normal position.
You can see examples here.
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