css的定位筆記

wuyangchun 發(fā)布于2019-04-23 13:14 / 829人閱讀

摘要：不論其父元素和相鄰元素的是什么，均相對(duì)于自身原來(lái)的位置來(lái)偏移。原來(lái)是行內(nèi)元素，設(shè)置相對(duì)定位后，依然是行內(nèi)元素。相對(duì)于最近的一個(gè)不為的父元素來(lái)定位，如果沒(méi)有，則相對(duì)于來(lái)定位，注意此處網(wǎng)上很多資料說(shuō)是相對(duì)于來(lái)定位，下文會(huì)進(jìn)行驗(yàn)證。

relative：相對(duì)定位。 1. 不論其父元素和相鄰元素的position是什么，均相對(duì)于自身原來(lái)的位置來(lái)偏移。 2. 不會(huì)脫離文檔流，其原來(lái)的位置依然保留著，不會(huì)被文檔中其他的元素占用。 3. 原來(lái)是行內(nèi)元素，設(shè)置相對(duì)定位后，依然是行內(nèi)元素。 4. 設(shè)置了相對(duì)定位的塊級(jí)元素，如果沒(méi)有設(shè)置寬度，其寬度依然是拉伸至父元素寬度的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>相對(duì)定位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;
        /* 相當(dāng)于以前的位置先向20px;在top原來(lái)的位置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;
          /* 行內(nèi)元素不會(huì)影響寬高 */
      }
style>

<body>
    
    <div class="A">div>
    <div class="B">div>
    <div class="C">div>
    <input type="text" class="D">
    <span>輸入span>
body>

html>

李南江老師視頻筆記

absolute：絕對(duì)定位。 1. 相對(duì)于最近的一個(gè)position不為static的父元素來(lái)定位，如果沒(méi)有，則相對(duì)于html來(lái)定位，注意：此處網(wǎng)上很多資料說(shuō)是相對(duì)于body來(lái)定位，下文會(huì)進(jìn)行驗(yàn)證。 2. 設(shè)置了絕對(duì)定位的行內(nèi)元素，會(huì)轉(zhuǎn)化為塊級(jí)元素，可以設(shè)置寬高。 3. 設(shè)置了絕對(duì)定位的塊級(jí)元素，如果沒(méi)有設(shè)置固定寬度，則其寬度不會(huì)自動(dòng)拉伸至父元素的100%，而是由內(nèi)容和內(nèi)邊距的寬度來(lái)決定的。 ?

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>絕對(duì)定位title>
head>
<style>
    div {
        height: 100px;
        width: 100px;

    }

    .A {
        background: red;
    }

    .B {
        background: green;
        position: absolute;
        /* right: 0; */
        /* /* top: 0; */
        bottom: 0;
        /* 脫離流元素，相對(duì)于body的位置 */
    }


    .C {
        background: blue;
    }

    span {
        position: absolute;
        width: 100px;
        height: 100px;
        background: yellow;
        /* 行內(nèi)元素不會(huì)影響寬高 */

    }
style>

<body>
    <div class="A">div>
    <div class="B">div>
    <div class="C">div>
    

body>

html>

子絕父相

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>Documenttitle>
head>
<style>
    /* 如果用相對(duì)定位則不居中，如果使用絕對(duì)定位是按當(dāng)前屏幕決定位置，會(huì)隨屏大小移動(dòng) */
    *{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>京東時(shí)尚li>
        <li>美妝館li>
        <li>超市li>
        <li>生鮮
            <img src="./images/FAQa.gif" alt="">
        li>
        <li>閃購(gòu)li>
        <li>拍賣li>
        <li>金融li>
    ul>
body>

html>