Menu
I want to free-float a chunk of DOM, that happens to include a <UL>, relative to an element, that happens to be in a <UL>, and I want the layout of the chunk of DOM to not be a function of its parent. That is as if it was a direct child of the <body> element.
HTML
<UL><LI>aaa</LI></UL>
<HR>
<UL>
<li>
<span class="r">x-<div class="freefloat">
<UL><LI>aaa</LI></UL>
</div></span>
</li>
<li>hello world</li>
</UL>
CSS
.r { position: relative; }
.freefloat { position: absolute; top: 0px; left: 1em; }
In the example, the two lists with aaa items end up with different bullets. That specific property can be suppressed/overridden, but how can I "reset" everything to be as it would be at the top level scope?
https://jsfiddle.net/tfy172x0/3/
256
I'm a little confused by your question. It seems like your trying to do something - but you're not telling us what it is. Maybe just explaining the ideal outcome would help.
I want to free-float a chunk of DOM, that happens to include a , relative to an element, that happens to be in a
OK. But I'm not sure I'd call that free-floating.
This sounds like a drop-down or something - but just really mysterious ; )
...how can I "reset" everything to be as it would be at the top level scope?
You can use initial https://developer.mozilla.org/en-US/docs/Web/CSS/initial in this case / but I wouldn't consider it to 'reset everything' - I don't think there is a way to do that. Usually - I'd just reset everything with a meyer reset - and explicitly define the list styles anyway.
ul {
border: 1px solid red;
}
.free-willy {
position: relative;
}
.free-willy ul {
position: absolute;
top: 0;
left: 1em;
background-color: lightgray;
padding-right: 1rem;
list-style: initial;
}<ul class="z">
<li>a</li>
<li>b</li>
</ul>
<ul>
<li>1</li>
<li class='free-willy'>
<span>2</span>
<ul>
<li>a</li>
<li>b</li>
</ul>
</li>
<li>3</li>
</ul>Is this what you want?
UPDATE:
I think we have a few clashes with terminology. You're probably too smart for CSS. haha. Ok, so "as a function of their position" is confusing but I think it helps get to the core of the questions.
There are 2 things happening here.
Sound like you are still getting used to the idea of the 'Cascade' in CSS. I know it seems crazy... but you'll have to embrace it. There are ways of scoping components so that they do not inherit parent things with more advanced setups / but it's not really worth it.
Each browser has a standard set of styles that it imposes on your code. The 'nested' ul has a different dot because chrome decided that.
Some things to look at:
https://meyerweb.com/eric/tools/css/reset/ This will "reset" the CSS (by overriding defaults) to remove - almost all styles set by any browser.
that in use: https://jsfiddle.net/sheriffderek/v3p1t5b2/
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
