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.
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 saw this example from w3schools.com. The website says that
The container element should be created with style = "position: relative".
The animation element should be created with style = "position: absolute".
I don't understand why this is the case. Could someone please kindly explain it to me.
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>
<h1>My First JavaScript Animation</h1>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>
By setting position: absolute on an element it is removed from the documents' normal rendering flow and it is rendered exactly where you tell it. Any positioning rule you set on this element (left, right, top, bottom) will be calculated using as reference the closest ancestor with position:relative if any is set or the body element.
If you need to broaden your understanding of CSS positioning fast, I recommend this tutorial.
The whole point of position: absolute is to position it BASED on the parent element.
The only way this can be achieved is through the use of position: relative on the parent element.
Since the default position-value is position: static the absolutely positioned element can not be based on that.
If there is no parent element with a position: relative the position: absolute element will position itself according to the html.
Here's a great post about the different position values on CSS-Tricks:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Quote from the css-tricks post on position: relative:
Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.
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/)
When you set an element's offset with jQuery.offset({coords}) it also sets the CSS property position to absolute.
I have a div, however, that I set to position: fixed in my CSS, and I want it to remain that way, even after setting the offset of the element with jQuery.
Now, I'm sure I can probably set the offset, then set position: fixed again, but I was wondering if there is a way I can tell jQuery to set the position to fixed instead of absolute when it sets offset.
HTML
<div class="searchResults">
...
</div>
CSS
DIV.searchResults {
position: fixed;
padding: 20px;
background-color: red;
z-index: 501;
}
jQuery
$("DIV.searchResults").offset({left: 0, top: 0});
Rendered HTML
<div class="searchResults" style="position: absolute; top: 0px; left: 0px;">
...
</div>
Obviously, since jQuery is setting the position in the style, it will trump the value of my CSS class. So I need a way to tell jQuery to set position to fixed instead of absolute, or tell it to set the offset without setting the value of the CSS property position.
As I commented above, in your case all you need is to modify the CSS for top and left like this:
$("DIV.searchResults").css({left: 0, top: 0});
Because the $.offset setter method only manipulates the left, top and position values to make the element relative to the page (from static to relative, and from fixed to absolute). Since you want it position fixed, set the values directly.
Maybe not that elegant, but I think you can just chain .css() after that to be sure that position is set to fixed like this:
jquery
$("DIV.searchResults").offset({
left: 0,
top: 0
}).css("position" : "fixed");
Not tested, but I think that'll work.
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.