4.前端CSS—定位

2020-08-08 17:31:57 阅读：171 来源： 互联网

标签：定位 color 标签前端 100px background top CSS

一、相对定位
二、绝对定位
三、固定定位
四、z—index

一、相对定位

相对于自身原来的定位进行定位，以左上角为基准。

.c1{
  background-color: blue;
  height: 100px;
  width: 100px;
  /*相对定位*/
  position: relative; 

  
  top:100px;		/*可以为负值*/
  left: 100px;
  /*right*/
  /*bottom*/
}

top: 100px表示距离原来的上边框100px，即自己向下移100px。

相对定位特点：

不脱离标准流
保留自己原来的位置
和浮动类似也会遮住其他标签

二、绝对定位

.c1{
  background-color: blue;
  height: 100px;
  width: 100px;
  /*绝对定位*/
  position: abssolute;

  top:50px;		/*可以为负值*/
  left: 100px;
  /*right*/
  /*bottom*/
}

绝对定位特点：

不保留自己原来的位置
按照父级标签或者祖父级标签，设置position为relative的标签的位置进行移动，如果一直找不到设置了这个属性的标签，那么按照body标签来移动。

三、固定定位

根据浏览器窗口设置的定位,即不会随着页面的滚动而滚动。

设置固定定位用top描述，那么是以浏览器的左上角设为参考点；如果用bottom描述那么是以浏览器的左下角为参考点

.c4{
  position: fixed;
  left: 20px;
  top: 20px;
}

四、z—index

应用：直接在主界面上弹出登录框

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1{
            /*背景或字体颜色单独的透明度*/
            background-color: rgba(255, 0, 0, 0.3);
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: rgb(255, 0, 0,);
            height: 100px;
            width: 100px;
            /*设置整个标签透明度，*/
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="c1">
        你好
    </div>
    <div class="c2">
        你好
    </div>
</body>
</html>

标签：定位,color,标签,前端,100px,background,top,CSS
来源： https://www.cnblogs.com/journeyer-xsh/p/13458614.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

4.前端CSS—定位

一、相对定位

二、绝对定位

三、固定定位

四、z—index