CSS Understanding margin in absolute positioned elements

Question

I am having some problems with margins in absolutely positioned elements.

As already answered in another question, margins in absolutely positioned elements are dictated by the first not statically positioned parent container.

CSS absolute positioned elements and margins

The example below is a simplified version of a multilevel dropdown menu, in which list items are generated dynamically. Meaning that is not possible to know the actual width beforehand (unless some javascript is implemented). The ">" with yellow background indicates another dropdown level. I'd like to have 5px margin between the end of the text and the ">".

See http://jsfiddle.net/3jzx8jh3

ul.level1 {
    position: relative;
    border: 1px solid black;
    width: 100px;
}

ul.level2 {
    position: absolute;
    border: 1px solid red;
}

span.right {
    margin-left: 5px;
    float: right;
    border: 1px solid black;
    background-color: yellow;
}

li {
    white-space: nowrap;
    border: 1px solid blue;
}


<ul class="level1">
    <li>Link1</li>
    <li>Link2
        <ul class="level2">
            <li><span class="right">></span>Fear is the path to the dark side</li>
        </ul>
    </li>
</ul>

I've noticed that when I set margin-left to about 190px, the ">" starts moving right. Meaning that the margin is indeed set in respect of the non statically positioned parent, this is the parent li element.

Can I get the margin as I wish just using css?

Thanks

score 0 · Answer 1 · answered Jul 10 '16 at 11:25

0

instead of
<li><span class="right">></span>Fear is the path to the dark side</li>
use
<li>Fear is the path to the dark side <span class="right">></span></li>
and remove float : right from your .right

answered Jul 10 '16 at 11:25

nayeri

175
1
7

Thanks for your answer. However, by doing that, if several list items have a submenu and therefore show the ">". These ">"s are not going to be vertically aligned. I need the float to ensure that all of them are equally justified to the right, should there be more than one. – Pisuke Jul 10 '16 at 12:00

score 0 · Answer 2 · answered Jul 12 '16 at 12:19

Just wanted to post a possible solution using the flex box. This will be fine in firefox, chrome and IE11. However, it won't work in older IE versions, in which the ">"s won't be aligned one below the other.

The li element becomes a flex-box (display: flex), justified with equal space between elements (justify-content: space-between). The spans are not anymore floated.

ul.level1 {
    position: relative;
    border: 1px solid black;
    width: 100px;
}

ul.level2 {
    position: absolute;
    border: 1px solid red;
}

span.right {
    margin-left: 5px;
    border: 1px solid black;
    background-color: yellow;
}

li {
    white-space: nowrap;
    border: 1px solid blue;
    display: flex;
    justify-content: space-between;
}

<ul class="level1">
    <li>Link1</li>
    <li>Link2
        <ul class="level2">
            <li>Fear is the path to the dark side<span class="right">></span></li>
            <li>Fear leads to anger<span class="right">></span></li>
        </ul>
    </li>
</ul>

The fiddle has been updated.

CSS Understanding margin in absolute positioned elements

2 Answers2