I just came across on the W3Schools that if the position property is not specified, the browser defaults itself to position: static;
So if that's the case, what's the purpose of specifying the position property as static explicitly? Is there any specific purpose? If yes, please guide me.
P.S. I'm a beginner in CSS
You would need to specify it explicitly if you wanted to override a rule that was specified earlier that targets that specific selector. For example, let's say someone does this in a different part of the stylesheet or a different stylesheet altogether:
header * {
position: relative;
}
Well, maybe position: relative isn't behaving the way you want it to on a specific element, so then you override it:
header > .my-special-element {
position: static;
}
That's just one example, but I think that it would be one of the most common scenarios.
The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.
The same reason as there is to specify any other property as its default value: To override some other piece of CSS.
Related
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I am working with zurb foundation 5, and I want to have a fullsize cover on the front.
But because zurb sets the position of the body "relative", I have trouble setting absolute positioned Divs.
Here is the jsfiddle and when you just remove the:
body {
position: relative;
}
you will see, how I actually want it to look like.
http://jsfiddle.net/ZULv9/
I guess I could remove it from the framework, but I rather would like to overwrite it or just to remove the css value in hindsight to keep the my hands out of the framework. I believe that it must be possible somehow, I just haven't found out how this is done.
Therefore I would be happy for any suggestions.
You can set the body styling to:
position: static;
which display all elements in order of how they appear in document flow.
Hope this helps!
body {
position: absolute !important;
}
css override
I have a html element with id="#item" I have a UI event that programaticaly alters the css for "#item" by adding the class ".new" to "#item". Initially I want "#item" to have "position:absolute". However once the class ".new" is added to "#item" the only way I can get the formatting I want in Chrome inspector is to removed position:absolute from the css for "#item". I'd like to accomplish this instead via the css in ".new", however in Chrome inspector my options for changing the position attribute are
static
absolute
relative
initial
inherit
fixed
As far as I can tell none of these do the same thing as removing "position:absolute" in Chrome inspector. Can anyone suggest what to put in the css for ".new" to revert to the css default positioning.
http://jsbin.com/ICeweli/1/
#test {
position: absolute;
}
#test {
position: static;
}
Remove one or the other to see the difference.
The CSS2 specification says that the initial position value of an element is static.
So in your case if you can't actually remove a declaration then reset it to the "default" which is static.
#item {
position: static;
}
You cannot use 'none' as an option.
For my need,
.search-bar{
position: static;
}
did the job.
If I have the following attribute:
html {
text-decoration: none !important;
}
But I wanted to allow one text-decoration, like 'line-through' to still be active...
Is it possible to do this? How?
Edit: I don't know what html this is applied to- it is dynamic through a browser plugin...
Thanks!
You can specify this attribute on your particular element/elements, like
.decorated {
text-decoration: line-through;
}
This way, the text-decoration value of none will not get inherited.
EDIT:
http://jsfiddle.net/mGGnc/ demonstrates this. This will, of course, never work if the decorated class is added to the HTML element, since in this case there will be no property value inheritance. CSS2 spec explains this.
If you will make separate a classes for your elements so than it will not get inherited from your reset css
You achieve your desired easily like this :-
html {
text-decoration: none;
}
.anchor a {
text-decoration:line-through;
color:red;
}
DEMO
The rule (not attribute) html { text-decoration: none !important; } has no impact, except in the rather hypothetical case where another style sheet sets the property on the root element, the html element. Contrary to popular misunderstanding, the text-decoration element is not inherited. When set to a value other than none, its effect partly resembles inheritance in a sense, though.
In a comment to an answer, you write: “this is a text-decoration reset css that removes all decorations- EXCEPT one or two that I would like to keep- like line-through”. As usual, general reset CSS stylesheets tend to cause problems rather than solve them. To override text-decoration settings on all elements, you would need to use the universal selector * (or a list of all known and unknown elements). But you cannot make it override settings that use some values and not override others, due to the way the property has been defined. Its value is either none or a space-separated list of keywords each specifying a “decoration”. So there is no way to just negate one of those keywords, without setting the property to a specific value.