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.
Related
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
What is the difference between float:left and float:right within a parent with position:relative? In my testing, both result in a div being floating in the top-left corner of it's parent, overlaying the image (unless I manually position the div using right: 0px).
I can see a difference with position:absolute. float:left needs it to overlay the div over the image, with float:right I can omit it and still get the overlay effect.
Can anyone enlighten me what's going on here?
My problem is illustrated in this jsFiddle.
HTML:
<div class="parent">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>
CSS:
.parent {
position:relative;
width: 200px;
}
.tag {
float: right;
position: absolute; /* can omit when using float:right */
/* right: 0px; */ /* uncomment to right-align child */
}
Edit:
I was mistaken with my statement about position:absolute and float. Somehow I got the impression when playing round with the jsFiddle, sorry for the confusion. Thanks for all your answers.
You cannot use float on an element that has set position: absolute;. Just use left: 0; or right: 0; to align them inside the parent which has position: relative;.
Also, position: relative will not touch the float behaviour of your children. It is just the position: absolute which disables the float functionality. which is the reason that your float: right is also on the left top side. With position: absolute you want to explicitly say where the element is located. floats do not fit into this role and will therefore have no effect.
Absolute positioning takes that element out of the normal flow. So when you try to use float it has no effect because it cannot flow within your .container to "float." You are telling it to ignore the rest of the elements for absolute positioning. With absolute positioning you have to state where you want it to reside within your parent. So #Francodi solution is correct. Just further explanation.
Float does neither affect elements that are position:absolute nor the parent child relationship. It only concerns elements living on the same DOM level. float:left will let the element float on the left and the other way round. clear: both applied on an element stops the floating there:
http://jsfiddle.net/MUP59/
Imho you are better of using display:inline-block most of the times.
I'm new to CSS and I have a question.
First, my HTML and CSS code:
<!-- HTML CODE -->
<body>
<div id="container">Container
</div>
<div id="inner">Inner</div>
</body>
<!-- CSS CODE -->
#container {
background-color:#b6ff00;
width:500px;
height:500px;
position:relative;
}
#inner {
background-color:#ffd800;
}
With current code, the browser shows the following page:
This is expected.
But if I add this css property to #inner element position:absolute; there will be a following output:
As you can see, the #inner div, takes only that much space it needs. Why this changed with only position:absolute; property added to #inner div?
That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..
If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;
Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.
I've explained here in detail, that how CSS Positioning Works
Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)
position: absolute; does not behave the same as block elements.
You will need to set a width and a height for a div that is absolutely positioned.
This is fundamentally how position absolute works. Once taken out of the flow of the document it becomes an inline-block element that is absolutely positioned within the nearest element that is positioned relatively (or the top most element)
If you need it to then be a certain dimensions you can try to set widths and heights, or you can do things like
#inner {
position: absolute;
left: 0;
right: 0;
}
...which would ensure it always stuck to the left and right sides of the screen.
It's generally good practice to put things that are positioned absolutely inside of an element with "position:relative" on it, as your code stands it suggests you want your #inner element to be placed anywhere on the page, whereas if you wanted it to be of a size and position relative to #container your code should look like this:
<body>
<div id="container">
Container
<div id="inner">Inner</div>
</div>
</body>
with CSS such as:
#container {
position: relative;
}
#inner {
background-color:#ffd800; width:500px;
height:500px;
position:relative;
}
You can see your output here:-
http://jsfiddle.net/KggJd/
Let me explain a little:
Postition: relative
This will align itself in accordance with the elements found before (i.e) Prior Siblings.
You can change the position by using margin-top, margin-left, ....
Position: absolute
This will always consider from the browser's start point and won't be in accordance with anything.
Drawbacks:
You cannot consider this as the parent or anything when absolutely positioned.
You can change its position by using top, bottom, right, left.
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
I have a simple problem where I have 2 divs, 1 is relative positioned. The child element is absolute positioned. This child has varying height.
The code so far:
HTML
<div id="wrap"><div id="inner"></div></div>
CSS
#wrap {
width: 100%;
background: #ccc;
position: relative;
min-height: 20px;
}
#inner {
width:30%;
background: #000;
position: absolute;
right: 0;
top: 0;
height: 200px;
}
The problem I have is that the #wrap element doesn't adjust its height to match the child element and therefor the child element hangs outside the edge of the parent. Can this be done with relative and absolute positioned elements?
I know this can be achieved with floating elements and following them with css => cleared: both, but I'd like to know if its possible with this method.
I've created a jsfiddle of this problem over here if anybody would like to help me out!
Thanks a lot.
Absolute positionned elements are outside the flow so parents can't adjust their height.
But you can simply use:
#wrap {
width: 100%; /* useless */
background: #ccc;
overflow:hidden; /* establish a new formatting context */
min-height: 20px;
}
#inner {
width:30%;
background: #000;
float:right;
}
No, you can't make a parent with position: relative adjust its height to fit a child element with position: absolute.
This is because:
In the absolute positioning model, a
box is explicitly offset with respect
to its containing block. It is removed
from the normal flow entirely (it has
no impact on later siblings). An
absolutely positioned box establishes
a new containing block for normal flow
children and absolutely (but not
fixed) positioned descendants.
However, the contents of an absolutely
positioned element do not flow around
any other boxes.
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
If you wanted to stick with your position based code, you'd have to use JavaScript to set the height of the parent div.
Otherwise, stick to using floats if they work for your case. #MatTheCat's answer looks good to me.
Just for completeness, here's a demo of #MatTheCat's answer with height: 200px added, so you can see the parent div does adjust in height: http://jsfiddle.net/gR2wL/3/