怎么定位快速隐藏的提示
您是否曾经看过那些缩略图，将其悬停在中间时会在中间显示一个图标，以暗示即将发生的事情？ 有没有想过如何达到效果？ 曾经尝试过，但是没有设法使图标失去中心，尤其是当缩略图不是固定尺寸时？ 然后，此快速提示适合您。
我说的是缩略图，您可以单击它来触发灯箱，或者是链接到作品集的缩略图。 无论如何，如果您可以建议当有人将鼠标悬停在缩略图上时将要发生的情况，则可以极大地增加网站的可用性。
此快速提示针对的是那些了解CSS的人，或多或少地了解了定位的含义，并正在寻找使用它的完美借口。
步骤1：起跑线
让我们快速将一些文档放在一起以演示我在说什么。 首先，我们的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hover Demo Thingy</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
</body>
</html>然后，我们将使用一些重置规则开始我们的styles.css文件。 您可能有自己喜欢的重置方法，但是暂时我已经使用Eric Meyer来启动我们CSS：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}接下来，为我们的页面提供一些布局结构，这是容器内的三列：
<div class="wrapper">
<div class="col">
</div><!--end col-->
<div class="col">
</div><!--end col-->
<div class="col">
</div><!--end col-->
</div><!--end wrapper-->现在，当然，我们现在需要添加一些样式，以使它们实际表现为灵活包装中的列：
/*our demo styles*/
html,
body {
background: #29282e;
}
.wrapper {
width: 90%;
max-width: 960px;
margin: 30px auto;
}
.col {
width: 27%;
padding: 0 3%;
float: left;
}所以我们有他们。 三列，每列27％宽，左侧和右侧填充3％，它们整齐地连续排列。 我们的包装程序非常灵活，可以达到浏览器窗口宽度的90％（最大为960px）。 我们还给了我们的正文和html不错的深色背景色。
步骤2：图片
是时候添加一些图像了。 我使用了Atelier Olschinsky颇具启发性的城市合集中的一些壁纸（可从kuvva.com上将它们用作桌面。）
每个图像都将包含在HTML5图形元素中 ，但直接由锚点包裹起来，以便将其与某些内容（灯箱放大版或外部站点等）链接：
<div class="col">
<figure>
<a class="enlarge" href="">
<img src="img/cities-07.jpg" alt="city number 7" />
</a>
</figure>
</div><!--end col-->因此，我们将三个数字放置在其自己的一列中，每个图像缩略图放置一个。
这些图像太大，因此，为了防止它们从列中爆发出来，让我们通过应用经典的流体图像规则为它们提供最大宽度：
figure img {
max-width: 100%;
}一个好的开始。 我们的流体布局分为三列，每列包含一个链接到某处的图像。
步骤3：悬停状态
让我们向用户清楚一点，单击图像可以完成某些操作。 我们将添加一个悬停状态，以减少缩略图的不透明度：
figure a:hover img {
opacity: 0.4;
filter: alpha(opacity=40); /* IE6-IE8 */
}步骤4：图示
现在查看所有重要图标。 我们希望将图标悬停在缩略图的中央，以便在图像悬停时可以看到。 它可以是您喜欢的任何符号，但应向用户指示将要发生的情况。 在此演示中，为简便起见，我将使用+号表示将激活较大的版本。
我们将使用伪元素:before将其添加到混合中：
a.enlarge:before {
content: "+";
display: block;
font-size: 40px;
line-height: 1em;
height: 1em;
width: 1em;
text-align: center;
color: #fff;
font-weight: bold;
position: absolute;
z-index: 100;
}我们将+放置为一个生成的：before元素，该元素是围绕图像的锚的一部分。 我们正在使用“ enlarge”类来标识需要+的锚点。 如果需要另一个符号，可以使用另一个类名。
首先，我们需要规定内容（我们的+字符），并声明它是一个块级元素。
重要！ 然后，以下规则确定尺寸。 我们已经说过，字体大小为40px。 然后我们说线高，高度和宽度都等于1em（因此为40px）。 这创建了一个40x40px的正方形。 通过将text-align设置为居中，并将line-height设置为1em，我们可以确保角色正好坐在正方形的垂直和水平中心。
接下来的重要规则是绝对定位（默认为0px，0px）和z-index，它确定我们定位的元素的堆叠顺序。 通过将其设置为100，我们可以确保其他元素位于其顶部。 让我们现在开始。
figure img {
max-width: 100%;
position: relative;
z-index: 900;
}
figure a {
position: relative;
display: block;
line-height: 0px;
text-decoration: none;
} 在这里，我们通过将z-index设置为高于100来确保img标签位于+图标的顶部。为了使该标签生效，我们需要声明一种定位类型（在这种情况下为“相对”） 。 我们的锚点也具有position:relative ，这意味着+图标现在绝对靠它定位。
您还会注意到锚中添加了其他一些样式。 我们已将其显示为块，删除了任何下划线装饰，并为其设置了0px的行高。 行高很重要，如果不重置，行高可能会显示为元素底部的附加填充。 现在，我们确保锚点紧贴图像。
我们的图标实际上一直存在，但是只有当覆盖它们的图像悬停时，它们才可见。
步骤5：正确定位
目前，我们的图标默认设置为锚点的左上方。 无论缩略图有多大，我们都需要它们在缩略图的中央。 然后，将它们从左侧放置50％，从顶部放置50％。 做完了吧？
a.enlarge:before {
content: "+";
display: block;
font-size: 40px;
line-height: 1em;
height: 1em;
width: 1em;
text-align: center;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}嗯 并不是的。 图标离缩略图中心不远。.这是因为元素相对于其左上角对齐。 再看一遍：
为了补偿定位，我们必须将其向上移动一半高度，向左移动一半宽度。 我们之前使用em来确定尺寸（1em = 40px），所以现在让我们使用0.5em（正方形的一半宽度）进行平移。 这样，无论我们将字体大小更改为什么，所有尺寸都将保持成比例。 感谢Gabri指出ems的用法！
a.enlarge:before {
content: "+";
display: block;
font-size: 40px;
line-height: 1em;
height: 1em;
width: 1em;
text-align: center;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
margin: -0.5em 0 0 -0.5em;
}为此，我们应用负边距。 -0.5em在顶部和左侧将完成工作。 可以认为它已经造成了真空，我们的元素被吸进了真空中。
答对了！ 我们的+图标完全位于缩略图的中心。 尝试调整浏览器的大小，它将完全保持死角。
为什么不进一步发挥作用呢？
这种技术有很多潜力：
- 使用websymbols字体，使您的图标显得有些爵士。
- 根据要显示的图标，对缩略图应用不同的类。
- 为什么不添加CSS过渡来平滑悬停效果？
结论
对于经验丰富CSS使用者来说，这是一个非常简单的技巧，但是如果您从未考虑过这样的定位，我希望此快速技巧对您有所帮助。
翻译自: https://webdesign.tutsplus.com/articles/quick-tip-perfectly-positioned-plusses--webdesign-5814
怎么定位快速隐藏的提示
1574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
