可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

CSS中伪元素的定位上下文问题

News felisharhoads92 117℃ 0评论

在研究CSS名著《CSS设计指南》(第3版)中,对讲到界面组件中的用CSS为弹出层设计三角形这个知识点时,对例子代码中伪元素的定位上下文关系产生了很大的困惑。


源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!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 #666; /* 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:#f2eaea;
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:#666;
margin-bottom:6px;
}
figcaption a { /* popup content */
display:block;
text-decoration:none;
font-size:12px;
color:#000;
}
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="#">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="#">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="#">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:#666;">
<p>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></p>
<p>A code example from <em>Stylin&rsquo; 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.</p>
</div>

</body>
</html>

浏览器渲染后的效果如下:

CSS中伪元素的定位上下文问题


文字说明框在鼠标悬浮于图片上时出现,同时框左边会出现由于边框透明原理而生出的三角形。具体原理代码如下:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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:#f2eaea;
border:3px solid red; border-radius:6px;
}
figure:hover figcaption {display:block; z-index:2;} /* displays popup when image is hovered */
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 */
}

根据《CSS设计指南(第3版)》中对定位上下文的解释,

在讲绝对定位的时候,我们知道绝对定位元素默认的定位上下文是body。这是因为body是标记中所有元素唯一的祖先元素。而实际上,绝对定位元素的任何祖先元素都可以成为它的定位上下文,只要你把相应祖先元素的position设定为relative即可。

​ ——P91,人民邮电出版社,《CSS设计指南(第3版)》


可是位于书中第226页的例子代码中(如上)却出现了不太符合这种逻辑的情况。用伪元素法生成的红色三角形是相对position属性为absolute的figcaption(即弹出文字框)作移动,而不是相对position属性为relative的祖先元素figure。

自己目前还是不太明白,是因为出现了hove的缘故?亦或 原先的定位上下文的规则不太适用于伪元素?

依旧求解中。


(2018.9.15更新)

对于这个问题的答案,自己姑且只能采取经验总结的方式了,总结认为伪元素::before和::after创建后position设置为absolute其位置移动属性是相对于设置自己的最近元素的。

参考了MDN文档中对::after和::before的解释,其中::before解释中出现了与此情况类似的代码。

HTML

1
2
3
4
5
6
7
8
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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: #CCFF99;
}

li.done::before {
content: '';
position: absolute;
border-color: #009933;
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

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

运行结果


点击前:

CSS中伪元素的定位上下文问题

点击后:

CSS中伪元素的定位上下文问题


可以看到这个例子代码也给before伪元素设置了移动属性top和left,然而——–,可是——, 它的父元素 li 是堂堂正正地设置为position:relative; 的吖。。。

目前看来也只能总结成自己的踩坑经验了,给定位上下文这个知识点补充一些例外。


CSS中伪元素的定位上下文问题

转载请注明:逗比根据地 » CSS中伪元素的定位上下文问题

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址