html - pseudo element below parent element in css -


Why is it that the pseudo elements are under the IMG within the parents, not the parent? I put a padding inside the basic element, it is relatively determined and it's z-index 9 while: first - complete and z-indexed -1?

What is happening to me is this: Before IMG element and it should be under the basic element.

HTML:

  & lt; Div class = "thumbnail" & gt; & Lt; Img src = "some_url" /> & Lt; / Div & gt;  

CSS:

 . Thumbnail {Height: 131 px; Maximum-height: 131 pixels; Width: 100%; Background: #fff; Box-Shadow: 0 0 5px -2px # 000; Margin-down: 20px; Padding: 5px; Status: Relative; Z-index: 1; }. Thumbnail: First,. Thumbnail: after {bottom: 0 pixels; Display area; material: ' '; Width: 33%; Height: 10px; Box-Shadow: 0 4px 6px -1px Rgba (0,0,0,0,5,5); Background: # 000; Z-index: -1; }. Thumbnail: First {left: 5px; Consequently, rotate (-6 degrees); }. Thumbnail: After {right: 5px; In turn, rotate (6 degrees); } Img {height: 100%; Width: 100%; Box-Shadow: 0 0 10px -3px # 000; }  

Psuedo classes: before and after: they are not as necessary is. They are recorded as child content of the element that you made them. They come before or after any element of that material. Part of this article

  
"thumbnail" & gt; and before or after? Going to can get some good explanations. . Thumbnail: First & lt; Img & gt; & Lt; P & gt; ...... Thumbnail: After & lt; / Div & gt;

I'm feeling OK


Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -