ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

6.CSS定位

2022-09-04 09:00:08  阅读:155  来源: 互联网

标签:定位 solid 1px CSS position border red


6.定位

6.1相对定位

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
 <!--相对定位
    相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
           
            border: 1px solid red;
            position: relative;/*相对定位:上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
           
            border: 1px solid red;
        }
        #third{
           
            border: 1px solid red;
            position: relative;
            bottom:10px;
        }
 ​
    </style>
 </head>
 <body>
 <div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
 </div>
 </body>
 </html>

相对定位:position:relative

相对于原来的位置进行指定的偏移,如果相对定位的话,它仍然在标准文档流中,原来的位置会被保留

6.2 绝对定位

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

2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移

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

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
        相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
            position: relative;
        }
        #first{
           
            border: 1px solid red;
        }
        #second{
           
            border: 1px solid red;
            position: absolute;
            right: 20px;
            top: -10px;
        }
        #third{
           
            border: 1px solid red;
        }
 ​
    </style>
 </head>
 <body>
 <div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
 </div>
 </body>
 </html>

6.3固定定位

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        /*绝对定位:相对于浏览器*/
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*fixed固定定位*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
 </head>
 <body>
 <div>div1</div>
 <div>div2</div>
 </body>
 </html>

 

 

6.4z-index

图层

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div id="content">
    <ul>
        <li>
            <img src="image/1.jpg" alt="">
        </li>
        <li class="tip">
            学习
        </li>
        <li class="bb">
 ​
        </li>
        <li>时间:2022.9.3</li>
        <li>地点:月球</li>
    </ul>
 </div>
 </body>
 </html>

opacity: 0.5;/背景透明度/

 /*父级元素相对定位*/
 #content ul{
    position: relative;
 }
 .tip,.bb{
    position: absolute;
    width: 380px;
    top: 200px;
    height: 20px;
 }
 .bb{
    background: black;
 }
 .tip{
    color: white;
    z-index: 999;
 }
 .bb{
    background: black;
    opacity: 0.5;/*背景透明度*/
    filter: alpha(opacity=50);
 }

 

 

 

 

 

 

 

 

 

标签:定位,solid,1px,CSS,position,border,red
来源: https://www.cnblogs.com/cyh822blogs/p/16654244.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有