I'm rewriting everything and moving away from absolute positions and instead using floats to position things the way I want them.
The question now is how can I float multiple divs on top of each other? The user will be able to switch between these divs somehow.
Thanks
Edit: The reason I'm moving away from absolute position is that I want my div to still be a child of its parent. i.e. if my div gets extended I want the parent div to get extended also.
float does not overlap with other floated objects in the same container. See here for an example of three successive floated objects to see how they don't overlap.
If you want objects to overlap, you will want/need to use absolute positioning. You can use positioning relative to the parent object by setting the parent to position:relative; and the child to position: absolute;. See here for an example of overlaping objects with absolute positioning relative to the parent.
If, you're trying to only have one of these objects actually display at a time, then just set the non-displayed objects to display: none and they will take no space in the page layout. You won't need to use float or absolute positioning.
I'm inexperienced in CSS selectors, but I'm sure you can find something that works better than naming each class specifically:
http://jsfiddle.net/aJqb2/
HTML:
<div class="over1"></div>
<div class="over2"></div>
<div class="over3"></div>
CSS:
div{
height:50px;
width:150px;
float:left;
}
.over1{
background-color:blue;
}
.over2{
margin-top:10px;
margin-left:-10px;
background-color:green;
}
.over3{
margin-top:20px;
margin-left:-10px;
background-color:orange;
}
I don't see how you are going to have users switch between the DIVs without using JavaScript.
Perhaps, leave the first div with the default static layout and display none for the others. Use JavaScript to show only one div at a time.
You can use float: left;, but personally I find it easier to use display: inline-block; instead.
Related
I need to take an element out of the flow an am using position:absolute; for that.
Now if I just set position:absolute; without giving any top/bottom/left/right values or giving a relative position to the parent, the element sits right where I want it to be.
Here is a FIDDLE
html :
<div id="parent">
<div id="absolute">.. Absolute div ..</div>
</div>
CSS :
#parent{
width:50%;
margin:10% auto;
background:gold;
height:20%;
}
#absolute{
position:absolute;
background:lightgrey;
padding:2%;
}
Is there a reason not to do this?
Should I realy give the element top/left values and the parent a relative position and why?
If you want an element to remain in its static position (where it would normally be if it were not positioned) but simply take it out of normal flow, simply specifying position: absolute is perfectly acceptable. The behavior is as described in sections 10.3.7 and 10.6.4 of the spec, and every browser behaves correctly.
You aren't required to give it any offsets if you don't want to move the element from its usual static position, and you aren't required to relatively position its parent element if you're not going to move the element anywhere since it'll remain in its static position anyway.
I just looked at your code again and noticed that you're applying percentage padding to your absposed element. You will need to relatively position the parent element if you want the percentage padding to be calculated based on the width of this parent element and not the initial containing block (where the root element resides):
#parent{
position:relative;
width:50%;
margin:10% auto;
background:gold;
height:20%;
}
Compare this fiddle with the original.
So, the main purpose of relatively positioning some ancestor of an absolutely-positioned element is for designating its containing block. Sections 9 and 10 have most of the gory details on the interactions between elements and their containing blocks. Depending on your layout you may not need to position anything else at all, however if your layout is complex enough you may find that there are side-effects resulting from whether or not you position any container elements, and which one you do position. I suspect the topic of containing blocks could be covered in a different question since it may very well be out of scope of this one.
I would say: It depends on what you are doing with the parent element.
If you add content to the parent AND also position:absolute;top:0;left:0; to the child it want help cause the position of the parent is not set and so it remains static.
example with only added content here: fiddle child box moved down cause of content
example with position:relative; to parent and position:absolute;top:0;left:0; to child here:
fiddle
#parent{
position:relative;
width:50%;
margin:10% auto;
background:gold;
height:20%;
}
#absolute{
position:absolute;
background:lightgrey;
padding:2%;
left:0;top:0;
}
The thing is that if you don't specify position, it's default value is static which doesn't allow you to specify any offset such as left, top... but if you don't need to specify offset, as it is in your case, then it is completly valid. On the other hand, if you want to specify offset then you also need to set position to something else than static.
I have done a test suite about "position: absolute;".
---> look at this
In summary:
the left edge of the containing block of an element set 'position: absolute' without top, right, bottom or left is probably the right margin edge of its previous inline box (ignoring white space)
the top edge of the containing block of an element set 'position: absolute' without top, right, bottom or left is probably the top edge of the containing block of the line box in which the element lives
But I cannot find any relevant specifications in w3.
I'm trying to place a div on top of all divs in a web page.
The common question to this is:
prepend your div to the body element
add a z-index property bigger than every other's
The problem:
i can't move my div in the DOM tree (due to angular limitations)
After reading the following article, it seems to me to be impossible.
Is that so?
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Any help is much appreciated
UPDATE:
Thank you guys
#user2604405 - I forgot to mention the fact that I want this div to cover all page, so I think only position: fixed is pertinent.
#shujatAli - I've said I can't move the div due to angular limitations.
#Explosion Pills - It is ok to move the div, as long as it covers all page.
#Flavio Paulino - z-index solution won't work =/ (the div is way down in the DOM tree).
#Jasper - I've tried using position: fixed; but it doesn't work since other divs also have z-index defined. And I can't clone the elemento to body because it's outside my AngularJS module which break my model bindings
yes!
just add the highest z-index on this div, like:
z-index: 1030;
Yes it is possilbe in three ways
Relative
div
{
position:relative;
left:-20px;
}
relative positioning will retain the original place of the element
Absolute
div
{
position:relative;
left:-20px;
}
Absolute positioning will not retain the original place
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
The above code is overlapping elements positioning, it can be made available by setting the z-index property.
FYI: This is a follow up to another question: Position element absolutely, but to the right of another element
I have a list of form elements and I'm trying to add callouts for each one. Each form entry has this general form:
<li>
<input ...>
<div class='callout'>Helpful description about form item.</div>
</li>
The .callout has position:absolute and the LI's have position:relative so that the callout can be positioned "absolutely", relative to the LI.
That all works fine, but the problem is that one of the ancestors of the also contains some floats so I used the overflow:hidden trick on that to make sure it contains them. Unfortunately, that also means it's cutting off my callouts because they extend outside of it.
I guess a fallback is to drop an empty div at the end of that ancestor and just do clear:both on that, but is there a nicer CSS solution that will force the ancestor to contain the floats, but still allow absolutely positioned callouts to be visible outside the box?
Instead of overflow:hidden you can use clearfix method. Write like this:
li:after{
content:'';
display:block;
clear:both;
}
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
I'm trying to get my wrapper to hold my content but it won't. I've taken out the floats and added "overflow: visible" no no avail. I'm thinking it's because of my z-indexing and negative margins, but have tried taking these out and still no change. Any ideas?
http://www.jenniferhope.com/bio
(the float is still in this example.)
Thanks for any help you can offer!
Try this:
#wrapper {
overflow:auto;
}
I took a look at the code on your site. There are a number of things you will probably want to address. It will be difficult to say exactly what you need to do, since I don't know exactly how you want the site to look. But, in general, here are some pointers:
To contain floated elements, apply overflow:auto; to the parent element, or place something to clear the floats at the bottom of the container, such as: <div style="clear:both;"></div>
Try to avoid using negative margins for positioning. This is OK in a pinch, but usually there is a better way.
If you need to have one element layered over another, you will need to position the element using position:absolute; and a z-index. When using position:absolute; the element will be positioned relative to the nearest ancestor that has position:relative; applied. If no element has this applied, it will be positioned relative to the body element.