I've got a <div id="mydiv"> with margin-left: 0px.
But sometimes (the page is dynamically generated) that this <div> is placed within another <div> that has a positive margin-left value.
This way #mydiv will have the margin of the container and not 0.
Is there a way to set
margin-left: 0px (relative to the body margin)
or
margin-left: -(sum of container margins)?
If your div is inside another one, the boundaries for that div are limited to it's container div.
You can break out of it by putting position: absolute; on the div you want to position differently. Then you should put a position: relative; on the container it should be relatively positioned to. Then you can use a negative margin-left.
use:
.mydiv{
position: absolute;
left : 0;
}
By using an absolute position and setting left to 0 your div will always be aligned with the left side of the containing element with no margin.
Use CSS positioning property and align the div's respectively.
For Example
You have a <div class="wrapper"> style this with position:relative
And for the inside <div class="mydiv"> style with position: absolute; left: 0; or left: 50%.
The main point is positioning:
position: fixed; will position the div relative to the browser window
position: relative; will position it relative to its normal position
position: absolute; will position it relative to the first parent element that has a position other than static (so it is not really absolute after all)
check http://www.w3schools.com/css/css_positioning.asp
You can achieve it with positions like relative and absolute.
You just need one top parent above all div.
I have created following example. It will help you to achieve what you need.
[Example](http://jsfiddle.net/dhavalsolanki/tjv5e1tn/)
Related
im working on some graphic representation of journal issues. What I need is to display block of text using simple DIVs (or else) inside of other DIV, exactly the way they are organized on issue page. To do that I need to set coordinates of DIV element to exact number, but in relation to parent DIV. Is there any way to do that by using css or js??
If you outer div is set to position: relative, you can have the inside div as position: absolute and set its top, left, right and bottom properties to the pixels you need. For example.
.outer {
position: relative;
}
.inner {
position: absolute;
top: 10px; //your coordinate
left: 5px; //your coordinate
}
<div class="outer">
<div class="inner">Your content</div>
</div>
Otherwise, you can simply use padding on the inner element.
If you want the div to be display: block;, you can use simple margin-top and margin-left to set coordinates.
Lets say (for example) you need to set the coordinates of the div as <100,50>:
To do that, in CSS, set margin-left: 100px and margin-top: 50px
I have a menu on top of my page, and after that a div tag that uses a class as below:
<div class="a">
Hello!
</div>
a is a general class that has position: absolute; in style.
I want to disable this absolute; since the div content not shown completely. So I decided to use another class that overrides the position setting.
<div class="a overridden-a">
What should I set for position: in .overridden-a{ position: ???? !important } in my other style?
Update: I don't want to edit the a class styles, It is common and general in project.
The default value of position is static.
The use of !important is not best practice and should be avoided where possible. Instead, to override a CSS rule you need to use a selector of a higher specificity. Try this:
.a.overridden-a {
position: static;
}
position: relative; would achieve what you require as well.
What you set it to instead depends on how you want to display it instead. There are 4 possible values (including absolute, which you're trying to override).
From http://www.w3schools.com/css/css_positioning.asp:
position: static; An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. This is the default.
position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Well, by default it is static, so you could set it to static.
Either by adding style="position:static" or doing it with css, after .a declaration:
.overriden-a{
position:static;
}
The default value of position is position: static, so this will probably work:
.overridden-a {
position: static;
}
You could always use inline-css with !important. This will override any other stylings as the priority will be first.
<div class="a" style="position: static !important">
Hello!
</div>
.overridden-a {
position: static;
}
Should do it but only if you put it after declaration of your a class. !important is usually used not so often if your css file is structured good. On the other hand it is used to overwrite any css rule in your file no matter of position where is declared at. In another words it stands out for css rules of specificity.
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Here is the source: CSS Positioning
Now,how can I make relative position to work as viewport and adjust accordingly by setting height,width etc like fixed position.
It is possible in css or not?
If not then how can I do?
Check this Fiddle
Try it:
div{
POSITION: relative;
TOP: 450px; LEFT: 651px;
width: calc(100% - 651px);
float: left;
}
You can also use javascript or jquery to do it.
I have a <input /> field and an <a><img /></a> icon which I want to put inside the input.
Of course I can't put an image inside of the input since it's not that kind of tag, but I'd be happy with it just overlapping.
If I use position: relative (which makes positioning it correctly easy) the icon continues to take up invisible space where it would have been.
If I use position: absolute I cannot position the icon relative to its previous sibling, the positioning values are in relation to the parent, which is not great because different browsers render the <input> with different sizes.
Is there a workaround for this?
http://jsfiddle.net/iambriansreed/u7DUv/
Wrap the input and a in a wrapper and absolutely position the a off the relatively positioned div wrapper.
CSS
input {
font-size: 24px;
width: 200px;
}
div {
position: relative;
width: 200px;
}
div a {
display: block;
position: absolute;
top: 4px;
right: 0;
z-index:99;
}
I think I know what to do now. I make a <span> where my icon was, it will have position:relative with no offset and it will contain the icon with position:absolute. This way the absolute offset from the span is effectively the relative offset wrt the page.
Use position:relative, and use padding-left as amount of image's width in input tag, there will not be hidden space.
Just use a negative margin-left on the image element to let it show up above the input.
I have a div inside a div inside a div ... By default each comtainer moves elements more and more to the right.
I have a elements "div.leftPanel" that can be nested very deeply in but I want it to be 50px (for args sake) to the left of the document (where the body's left property would be) and not it's parent element. Some of it's containers need to have a position of absolute or relative.
Is there any way to do this with css? if not then javascript?
You could use a negative margin to achieve this if you already know how far the nested div has been pushed out from the left of the body. Example:
<div style="position:absolute; left: 30px;">
<div style="position:absolute; left: 30px;">
<div style="position: relative; margin-left: -10px;">
</div>
</div>
</div>
If it isn't set, you can always find out how far from using javascript and apply the margin dynamically.
If you apply position: absolute; and left: 50px; to div.leftPanel, and none of its parent elements have any position (absolute or relative), then the 50px will be calculated from the left edge of the document.
EDIT: Sorry, I missed the sentence where you said some of the parents had to have a position. Can you just move div.leftPanel out of the other <div>s entirely? Maybe just place it at the root of the document so its position will be calculated from the edge of the document.