CSS——定位，z-index和透明度

万里顾一程
159 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

CSS 定位 (Position) 属性允许你对元素进行定位。

属性值：

static默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

绝对定位（absolute）

1.父级元素没有定位的前提下，会相对于浏览器页面定位

2.假设父级元素存在定位，会根据父级元素进行指定偏移,不能超脱父级元素

使用场景：一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别
花边等场景

  #father{
                    border:1px solid red;
                    padding:10;
                    position:relative;  /*先父级元素加一个定位*/
         }
#second{
                     border:1px solid blue;
                     position:absolute;
                     top:-30px;   /*相对于父级元素指定偏移*/
                     right:30px;
         }

相对定位（relative）

相对定位：相对于自己原来的位置进行指定的偏移（相对定位任然在标准文档流中，并且偏移之前的位置会被保留）

使用场景：相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--相对定位：相对于自己原来的位置进行偏移 -->
    <style>
    body{
    padding:20px;
    }
        div{
         margin:10px;
         padding:5px;
         font-size:14px;
         line-height:25px;
         }
         #father{
                    border:1px solid red;
                    padding:10;
         }
          #first{
                     border:1px solid green;
                     position:relative;  /*相对定位*/
                     top:-20px; /*向上移20px*/
                     left:20px; /*向右移20px*/
         }
          #second{
                     border:1px solid blue;
         }
          #third{
                     border:1px solid yellow;
                     position:relative;  /*相对定位*/
                     bottom:-10px;  /*向下移10px*/
                     right:10px;  /*向左移10px*/
         }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

效果图 在这里插入图片描述

固定定位（fixed）

不论窗口滚动与否，元素都会留在那个位置

使用场景：一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
          height:1000px;
        }
        div:nth-of-type(1){
           width:200px;
           height:200px;
           background:red;
           position:absolute;
           right:0;
           bottom:0;  /*位于浏览器的右下角*/

         }
         div:nth-of-type(2){
            width:100px;
            height:100px;
            background:yellow;
            position:fixed;
            right:0;
            bottom:0;
         }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

效果图

在这里插入图片描述

Z-INDEX

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" /> 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>

效果图

在这里插入图片描述

透明度（opacity）

设置 div 元素的不透明级别

规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

div{
opacity:0.5;
}

<!DOCTYPE html>
<html>
<head>
    <script>
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
  {el.style.opacity=opacity;}
else
  {alert("Your browser doesn't support this example!");}
}
</script>
</head>
<body>

<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>
<select onchange="ChangeOpacity(this);" size="5">
    <option />0
    <option />0.2
    <option />0.5
    <option />0.8
    <option selected="selected" />1
</select>

</body>
</html>

效果图 在这里插入图片描述

avatar
文章
阅读
粉丝