目录
定位
position
相对定位
绝对定位
固定定位
粘性定位
z-index
opacity
透明悬停效果
透明盒中的文本
下拉式菜单
代码
此属性规定应用于元素的定位方法的类型。
当开启了元素定位时(position的属性值是一个非static的值),可以通过left right top bottom 四个属性来设置元素的偏移量
属性 | 作用 |
---|---|
left | 元素相对于其定位位置的左侧偏移量 |
right | 元素相对于其定位位置的右侧偏移量 |
top | 元素相对于其定位位置的上侧偏移量 |
bottom | 元素相对于其定位位置的下侧偏移量 |
例:
.topleft { position: absolute; top: 8px; left: 16px; font-size: 18px; }
div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }
position属性值设置为absolute。
绝对定位的特点:
position属性值设置为fixed。
特点:
粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴/固定”在适当的位置(比如 position:fixed)。
注:Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。
Safari 需要 -webkit- 前缀(请参见下面的实例)。您还必须至少指定 top、right、bottom 或 left 之一,以便粘性定位起作用。
div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }
此属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。
可做重叠元素效果。如文字在图片上方。
注意:
img { position: absolute; left: 0px; top: 0px; z-index: -1; }
此属性设置元素的不透明级别。
值 | 描述 | 测试 |
---|---|---|
value | 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 | 测试 |
inherit | 应该从父元素继承 opacity 属性的值。 |
0.5效果
opacity 属性通常与 :hover 选择器一同使用,这样就可以在鼠标悬停时更改不透明度。
img { opacity: 0.5; } img:hover { opacity: 1.0; }
效果图
<html> <head> <style> div.background { background: url(pattern.webp) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>Hello World!</p> </div> </div> </body> </html>
效果
<style> /* 设置下拉按钮的样式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* 容器 <div> - 需要放置下拉内容 */ .dropdown { position: relative; display: inline-block; } /* 下拉内容(默认隐藏) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* 下拉链接 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 悬停时更改下拉链接的颜色 */ .dropdown-content a:hover {background-color: #f1f1f1} /* 悬停时显示下拉菜单 */ .dropdown:hover .dropdown-content { display: block; } /* 显示下拉内容时,更改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>