Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS :before/:after selectors are suddenly being positioned separately of parent div

I switched to a new computer, and all of a sudden the CSS :after and :before selectors no longer work.

What's truly bizarre is that the :before/:after selectors I added before, on my other computer, display completely normally on my new computer. But any new ones I add now simply don't show up, even if I copy-and-paste the old code onto a new div.

For example, this one:

html

<div id="wtf"></div>

css

#wtf {
    width: 10px;
    height: 20px;
    background: red;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}

This code works when copied and pasted directly into a fiddle: ( http://jsfiddle.net/rLnrtu0x/ ) but only the red box displays on my local browser. No matter what I do, the blue box won't show. All other CSS behaves normally.

Does anyone know what I might be doing wrong?

Tested on Mozilla 35.0.1 and Chrome 42.0.2311.152 (64-bit) on Ubuntu 14.04. I can't retest it on my old computer because it broke, but I never had problems with :before/:after selectors before.

UPDATE

I just found the selectors with my inspector. They actually display normally, but they are being positioned relative to html, not their parent div. Here again, with the code that I added before the computer change, the :before/:after selectors are positioned relative to the parent div. But the new code, even though it's copy-and-pasted, positions the selectors relative to the html. Why would this be?

like image 659
Joe Morano Avatar asked May 15 '15 03:05

Joe Morano


People also ask

How do you place a div at the bottom of the parent div?

Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.

Does Z-Index working on pseudo element?

It is important to realize that pseudo-elements are considered descendants of their associated element. You may set a negative z-index for these pseudo-elements, but in order for them to actually appear below their parent element, you must create a new stacking context for the parent.

How do you position things next to each other in CSS?

If you want to place them next to each other you would require to use a CSS property float. As the name goes the float property specifies how an element should float in the webpage on the left or the right!. Values that a float property can have areas below, left - The element will float left w.r.t to its container.

How do I bring one div in front of another?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).


1 Answers

The parent container needs to have position

Absolutely positioned elements are positioned "at a specified position relative to its closest positioned ancestor or to the containing block." (src: MDN)

So, your :after pseudo-element is not contained by its parent because the parent isn't "positioned" or its position is set to static.

The only explanation is that there must have been something in your previous setup that was applying position to #wtf, which allowed its child to be positioned absolutely within it.

You can "fix" the issue by applying position to #wtf like so:

#wtf {
    width: 10px;
    height: 20px;
    background: red;
    position: relative;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}
<div id="wtf"></div>
like image 86
gfullam Avatar answered Sep 22 '22 16:09

gfullam