定位

2021-09-03 22:31:14 阅读：155 来源： 互联网

标签：定位 100px height width 10px position

6、定位

6.1、相对定位

相对于原来的位置，进行偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留

position:relative
top:-10px
left:-10px
buttom:-10px
right-10px

练习题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习题</title>
    <link rel="stylesheet" href="CSS/练习题.css">
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>

#box{
    width:300px;
    height:300px;
    border:10px solid #090505;
    padding:10px;
}
a
{
    width:100px;
    height:100px;
    text-decoration:none;
    background:pink;
    line-height:100px;
    text-align:center;
    color:white;
    display:block;
}
a:hover{
    background: #3748ff;
}
.a2,.a4{
    position:relative;
    left:200px;
    top:-100px;
}
.a5
{
    position:relative;
    left:100px;
    top:-300px;
}

6.2、绝对定位

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

2、假设父级元素存在定位，我们会相对父级元素进行偏移

3、在父级元素范围内移动

相对于父级或者浏览器的位置，进行制定的偏移，绝对定位后，它不在标准文档流中，原来位置不会被保留

6.3、固定定位fix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link rel="stylesheet" href="CSS/固定定位.css">
</head>
<body>
        <div></div>
        <div></div>
</body>
</html>

body{
    height:1000px;
}
div:nth-of-type(1){
    width:100px;
    height:100px;
    background: #ff4f3d;
    position:absolute;
    right:0;
    bottom:0;
}
div:nth-of-type(2){
    width:100px;
    height:100px;
    background: #768e80;
    position:fixed;
    right:0;
    bottom:0;
}

6.4、z-index

z-index:默认是0 ，最高无限

opacity:0.5;网页背景透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zindex</title>
    <link rel="stylesheet" href="CSS/zindex.css">
</head>
<body>

<div id="content">
      <ul>
          <li><img src="images/img1.png" alt=""></li>
          <li class="tipTEXT">修图|化妆|做前端</li>
          <li class="tipBg"></li>
          <li>时间：2023.9.3</li>
          <li>地点：拍摄地点 公司</li>
      </ul>
</div>
</body>
</html>

#content{
    width:200px;
    padding:0px;
    margin:0px;
    overflow:hidden;
    font-size:12px;
    line-height:25px;
    border:1px #000000 solid;
}
ul,li{
    margin:0px;
    padding:0px;
    list-style:none;
}
/*父级元素相对定位*/
#content ul{
    position:relative;
}
.tipTEXT,.tipBg{
        position:absolute;
        width:200px;
        height:25px;
        top:233px;
}
.tipTEXT{
    z-index:999;
    color:black;
}
.tipBg{
    background: #ffffff;
    opacity:0.5;
    /*filter:alpha(opacity=50)*/
}

标签：定位,100px,height,width,10px,position
来源： https://www.cnblogs.com/fangpiandang/p/15225257.html

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

ICode9

定位

6、定位

6.1、相对定位

6.2、绝对定位

6.3、固定定位fix

6.4、z-index