欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css的定位笔记

程序员文章站 2022-06-30 12:10:51
relative:相对定位。 1. 不论其父元素和相邻元素的position是什么,均相对于自身原来的位置来偏移。 2. 不会脱离文档流,其原来的位置依然保留着,不会被文档中其他的元素占用。 3. 原来是行内元素,设置相对定位后,依然是行内元素。 4. 设置了相对定位的块级元素,如果没有设置宽度,其 ......
relative:相对定位。
1. 不论其父元素和相邻元素的position是什么,均相对于自身原来的位置来偏移。
2. 不会脱离文档流,其原来的位置依然保留着,不会被文档中其他的元素占用。
3. 原来是行内元素,设置相对定位后,依然是行内元素。
4. 设置了相对定位的块级元素,如果没有设置宽度,其宽度依然是拉伸至父元素宽度的100%。
下面是demo
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>相对定位</title>
</head>
<style>
    .a {

        background: yellow;
        height: 100px;
        width: 100px;

    }

    .b {
        background: red;
        height: 100px;
        width: 100px;
        position: relative;
        top: 20px;
        margin-top: 20px; 
        margin-bottom: 20px;
        /* 相当于以前的位置先向20px;在top原来的位置20px; */
        /* bottom: ; */
    }

    .c {
        background:green;
        height: 100px;
        width: 100px;

    }
    span{
       position: relative;
       top: 50px;
    }
    input{
        width: 20px;
        height: 30px;
      }
      span{
         position: relative;
          width: 100px;
          height: 100px;
          background: red;
          /* 行内元素不会影响宽高 */
      }
</style>

<body>
    <!-- 相对定位就是相当于自己以前在标准流中的位置来移动
不会脱离自己的标准流,自己的位置不变 position:relative;
top:20px;
left:20px;

相对定位应用场景
用于对元素进行微调
配合后面的学习的绝对定位来使用

-->
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <input type="text" class="d">
    <span>输入</span>
</body>

</html>

李南江老师视频笔记

css的定位笔记

absolute:绝对定位。
1. 相对于最近的一个position不为static的父元素来定位,如果没有,则相对于html来定位,注意:此处网上很多资料说是相对于body来定位,下文会进行验证。
2. 设置了绝对定位的行内元素,会转化为块级元素,可以设置宽高。
3. 设置了绝对定位的块级元素,如果没有设置固定宽度,则其宽度不会自动拉伸至父元素的100%,而是由内容和内边距的宽度来决定的。
 
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>绝对定位</title>
</head>
<style>
    div {
        height: 100px;
        width: 100px;

    }

    .a {
        background: red;
    }

    .b {
        background: green;
        position: absolute;
        /* right: 0; */
        /* /* top: 0; */
        bottom: 0;
        /* 脱离流元素,相对于body的位置 */
    }


    .c {
        background: blue;
    }

    span {
        position: absolute;
        width: 100px;
        height: 100px;
        background: yellow;
        /* 行内元素不会影响宽高 */

    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <!-- <span>我是span</span> -->

</body>

</html>

css的定位笔记

 

 css的定位笔记

css的定位笔记

子绝父相

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
</head>
<style>
    /* 如果用相对定位则不居中,如果使用绝对定位是按当前屏幕决定位置,会随屏大小移动 */
    *{margin: 0;
      padding: 0;
      }
    ul{
        list-style: none;
        height: 50px;
        width: 700px;
        margin: 0 auto;
        margin-top: 100px;
        
    
        
    }
    ul li{
        float: left;
        text-align: center;
        width: 100px;
        line-height: 50px;
        background: rgb(184,184,184);
        
    }
    ul li:nth-of-type(4){
        position: relative;
        background: #aad;
    }
    ul li img{
       position: absolute;
       top: -13px;
       left: 42px;

    }
</style>
<body>
    <ul>
        <li>京东时尚</li>
        <li>美妆馆</li>
        <li>超市</li>
        <li>生鲜
            <img src="./images/faqa.gif" alt="">
        </li>
        <li>闪购</li>
        <li>拍卖</li>
        <li>金融</li>
    </ul>
</body>

</html>