高考志愿填报指导
0731-88711630

html+css

当前位置：主页 > 教学资料 > html+css >

第九课 定位与半透明

1、定位

设置定位方式position

position取值如下：
static 静态定位，默认的定位方式
absolute 绝对定位，以当前网页的左上角为坐标原点
fixed 固定定位，以当前浏览器窗口的左上角为坐标原点
relative 相对定位，相对于元素原来的位置

定位属性

当定位方式设置为absolute、fixed、relative三者之一时，可以通过以下四个属性设置元素的位置。
top  相对顶边的距离           right 相对右边的距离
bottom 相对底边的距离     left 相对左边的距离
这四个属性的取值可以为正负整数，单位为px，建议不要同时使用top和bottom，也不要同时使用left和right。

设置元素的叠放顺序z-index 

例如：z-index:1 ，数字越大则越靠上层。

设置元素是否可见visibility

visibility与display:none的区别是它只隐藏元素，但保留元素占用的位置。取值：hidden 隐藏     visible 显示

2、半透明

gif图片透明

PNG半透明

网页元素半透明

img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

3、CSS下拉菜单

<style>
.menu {position: relative;  display: inline-block;}
.sub{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.menu:hover .sub {display: block;}
</style>
<div class="menu">
  <span>主菜单</span>
  <div class="sub">
    <p>下拉菜单内容</p>
  </div>
</div>

4、CSS实现提示框

<style>
.tooltip {  position: relative;  display: inline-block;  border-bottom: 1px dotted black;}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {  visibility: visible;}
</style>
<body>
<div class="tooltip">移到我上面
  <span class="tooltiptext">工具提示文本</span>
</div>


咨询电话：0731-88711630 微信号：hn887700 谢老师 QQ：359689361
长沙网学教育科技有限公司 网站备案号：湘ICP备15000537号