What is the location context of pseudo-elements in CSS?

in the study of CSS"s CSS Design Guide (3rd edition), when it comes to designing triangles for pop-up layers with CSS in interface components, there is a lot of confusion about the positioning context of pseudo elements in the example code

. < hr >

the source code is as follows: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>Stylin" with CSS - Figure 6.24 Popup Overlay</title>
<style>
* {margin:0; padding:0; font-family:helvetica, arial, sans-serif;}
figure {
    width:144px; height:153px; /* sizing of image box */
    margin:20px 20px;            /* space between boxes */
    border:1px solid -sharp666;        /* image border */
    position:relative; /* positioning context for popups */
    float:left; /* makes images sit side by side */
    }
img {display:block;}/* remove baseline spacing from under image */
figcaption {
    display:none; /* hides popups */
    position:absolute; /* relative to images */
    left:74%; top:14px; /* positions popup on right side of image */
    width:130px; /* width of popup */
    padding:10px; /* space around popup content */
    background:-sharpf2eaea;
    border:3px solid red; border-radius:6px;
    }
figure:hover figcaption {display:block; z-index:2;} /* displays popup when image is hovered */
figcaption h3 { /* popup content */
    font-size:14px;
    color:-sharp666;
    margin-bottom:6px;
    }
figcaption a { /* popup content */
    display:block;
    text-decoration:none;
    font-size:12px;
    color:-sharp000;
    }
figcaption::after { /* red triangle box*/
    content:""; /* some content required - using empty text string */
    position:absolute; /* relative to popup */
    border:12px solid;
    border-color:transparent red transparent transparent; 
    right:100%; top:17px;
    height:0px; width:0px; /* collapses box to create triangle */ 
    }
</style>
</head>

<body>
    <figure>
        <img src="images/pink_heels.jpg" alt="pink heels" />
        <figcaption>
            <h3>Pink Platforms</h3>
            <a href="-sharp">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="images/leopard_heels.jpg" alt="leopard heels" />
        <figcaption>
            <h3>Leopard Platforms</h3>
            <a href="-sharp">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="images/red_heels.jpg" alt="red heels" />
        <figcaption>
            <h3>Red Platforms</h3>
            <a href="-sharp">More info</a>
        </figcaption>
    </figure>
    
    <!-- OK to remove the code between here and </body> -->
    <!-- Please note that the watermarked image/images in this code example is/are provided only for the purpose of displaying the code example in your browser. Licensing rights to this image/images is/are not conveyed to you. If you would like to purchase licensing rights for the images in this book, please visit the following url: --> 
    <div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:-sharp666;">
    
To purchase the stock images in this book and other great stock images, go to <a href="http://www.bigstockphoto.com/?refid=PEECNmwgKb">bigstockphoto.com</a>

    
A code example from <em>Stylin"  with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.

    </div>
    
</body>
</html>

the rendered effect of the browser is as follows:

clipboard.png

The

text description box appears when it is hovering over the picture, and triangles created by the transparency of the border appear on the left side of the box.
what I don"t understand is why triangles generated with pseudo elements will move relative to the figcaption whose position attribute is absolute (that is, pop-up text boxes), rather than the knowledge points where position is the relative ancestral element figure.
positioning context emphasizes that the ancestral element whose position is set to relative can become the absolute positioning element positioning context, which is obviously not in line with this logic here.
is it because of the pseudo-class hover?
I don"t understand!

Html5 html css
Jun.23,2021

because it is a pseudo element of figcaption

for the answer to this question, I can only take the way of experience summary, concluding that after the pseudo elements:: before and:: after are created, the position is set to absolute and its position movement attribute is relative to setting its own recent element.

refers to the interpretation of:: after and:: before in the MDN documentation, where code similar to this appears in the:: before interpretation.

HTML 

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

CSS 

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: -sharpCCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: -sharp009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript 

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

running results

you can see that the move attributes top and left, are also set for the before pseudo-element but-- but its parent element, li, is openly set to position:relative.

at present, it seems that it can only be summed up as their own experience of walking in the pit, adding some exceptions to the knowledge point of locating context.

first of all, when the element's position is set to absolute, the default positioning context for this element is the body element without the parent of the body element, because he is the ancestor of all elements (see Section 3.4.5 of your book).

I think it's because the position attribute of figcaption is set to absolute, so that the figcaption element becomes a child element in a new BFC, and the ancestor of the child element becomes figcaption instead of body, and there is no relative element in figcaption, so the default positioning context of his child element (pseudo element) becomes this figcaption.

Previous: When webpack runs the project, the content in the style tag of the vue file has no effect, so it is effective to copy it directly into the html file?

Next: Why are the, dir () method and the _ _ dir__ () method different for a class?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu