The basic code:
<div parent>
<div wrapper>
<div child></div>
</div>
</div>
The basic scheme:
http://i.imgur.com/I70VL4f.jpg
The scheme shows how I want the child element to be positioned. By default, it "walls" to the left of the parent element, but I want it to wall to the right of the parent element. So let's say if the child element increases in size, it will stick out from the left side of the wrapper instead of the right side of the wrapper.
The child is to remain position: static.
Thank You.
You can use CSS for this. Give your parent div a class of parent and child div a class of child. Then in your css use the following code.
.parent{
position: relative;
}
.child{
position: absolute;
right: 0px;
top: 20%;
}
Note this top: 20% is subject to change.
You can use position and right properties. On parent use position: relative to set the relative container of children. Use right: 0px on child container to allow going to left side.
Here is a fiddle example:
Fiddle example
You cannot achieve the result with the desired efficiency by giving position: static to the child element.
For best results you will have to use position: relative and absolute combo as I stated above. Otherwise it will always be a hit and trial of margins that you will have to do manually.
Related
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
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 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.
How can get both #row1 and #row2 in the following code to be visible, one after the other vertically, as if there wasn't any absolute/relative positioning involved (though without removing the positioning properties)? I.e. having the two .row <div> to appear as "normal" block elements.
body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}
<body>
<div class="container">
<div id="row1" class="row">
<div class="col1">Hello</div>
<div class="col2">World</div>
</div>
<div id="row2" class="row">
<div class="col1">Salut</div>
<div class="col2">le monde</div>
</div>
</div>
</body>
(Sample also available as a fiddle.)
I need the elements to have the positioning provided in the CSS rules, for reasons excluded here.
The content is programmatically dynamic; I don't know the elements' heights beforehand, so a solution can't be based on specifying an absolute length (e.g. 'px') anywhere.
Well you have some weird wishes here so let me explain you what those positions really mean in CSS and how they work, using position: relative; is just like using static position, the difference is making an element position: relative;, you will be able to use top, right, bottom and left properties, though the element will move, but physically it will be in the document flow..
Coming to position: absolute;, when you make any element position: absolute;, it gets out of the document flow, hence, it has nothing to do with any other element, so in your example
you have .col1, .col2 {position: absolute;} which are positioned absolute and since both are out of the document flow, they will overlap... Because they are already nested under position: absolute; parent i.e .container and since no width is assigned, it will take the minimal width and hence, your elements overlap, if you cannot change your CSS(which according to me doesn't make any sense why you can't change) still if you want, than you can do is this..
Demo (Without removing any of your position property) And this is really dirty
For the s characters, it will be at the top as your container element is out of the flow, and hence, no height will be considered in the document flow, unless and until you wrap that s in some element, and bring it down with, margin padding or CSS Positioning.
CSS Positions Explained
As I commented, here are few examples of how CSS Positioning actually works, to start with, there are 4 values for position property i.e static which is the default one, relative, absolute and fixed, so starting with static, nothing to learn much here, elements just stackup one below the other unless they are floated or made display: inline-block. With static positioning, top, right, bottom and left won't work.
Demo
Coming to position: relative; I've already explained you in general, it's nothing but same as static, it stacks up on other element, it is in the document flow, but you can tweak the elements position using top, right, bottom and left, physically, the element stays in the flow, only position of the element is changed.
Demo 2
Now comes absolute which generally many fails to understand, when making an element absolute it gets out of the document flow, and hence it stays independent, it has nothing to do with other elements positioning unless it's overlapped by other position: absolute element which can be fixed using z-index to change the stack level. The main thing to remember here is to have a position: relative; container so that your absolute positioned element is relative to that relative positioned element, else your element will fly out in the wild.
It's worth noting that position: absolute; element when positioned absolute; inside an absolute positioned parent element, than it is relative to that element and not relative to the grand parent element which may be positioned relative
Demo 3 (Without position: relative; container)
Demo 4 (With position: relative; container)
Last is position fixed, this is same as absolute but it flows along when you scroll, it's out of the document flow, but it scrolls, also, position: fixed; element cannot be relative to any container element having any type of position, not even relative, position fixed element is always relative to the viewport, so designers use position: absolute; when they want to have a fixed position behavior but relative to parent and tweak the top property onScroll.
Demo 5
What you want, is not possible without modifying the CSS position property. However, what you can do without touching the existing CSS, is overriding it with a more specific selector
.row .col1, .row .col2 {
position: relative;
}
See JSFiddle
when position:relative is used, the page layout will occur normally before being offset by top, left values, however position:absolute will ignore the document flow. The relative ones will work with no changes but absolute must be changed
.col1, .col2 {display:inline-block;}
http://jsfiddle.net/C4bQN/
EDIT: Depending on your circumstances, maybe you can wrap your table in an absolute positioned div then use normal document flow within the table?
<div class="absolute-wrap">
<div class="row">
<div class="col"> </div>
</div>
</div>