css的定位筆記

wuyangchun 發布于2019-04-23 13:14 / 821人閱讀

摘要：不論其父元素和相鄰元素的是什么，均相對于自身原來的位置來偏移。原來是行內元素，設置相對定位后，依然是行內元素。相對于最近的一個不為的父元素來定位，如果沒有，則相對于來定位，注意此處網上很多資料說是相對于來定位，下文會進行驗證。

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>
    
    <div class="A">div>
    <div class="B">div>
    <div class="C">div>
    <input type="text" class="D">
    <span>輸入span>
body>

html>

李南江老師視頻筆記

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>
    

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>
    /* 如果用相對定位則不居中，如果使用絕對定位是按當前屏幕決定位置，會隨屏大小移動 */
    *{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>

云服務器 GPU云服務器中的絕對定位 html 圖片的定位我的位置定位地圖圖片 html里的定位嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1611.html

【學習筆記】CSS深入理解之absolute

摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。《張鑫旭的CSS深入理解之absolute》學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代絕對定位的行為表現無依賴絕對...

Anleb 2019-08-30 15:54 評論0 收藏0
《Python web開發》筆記三: CSS基礎

摘要：計算方式一個行內樣式，一個，一個屬性選擇器或者偽類，一個元素名，或者偽元素。其他規則見拓展閱讀。絕對定位設置了絕對定位之后，元素脫離文檔流，其他的元素會調整位置來彌補它偏離后剩下的空隙。 CSS常用選擇器 - 通配符選擇器 * - id選擇器(id #) - 類選擇器(class .) - 元素選擇器(E) - 后代選擇器(E F) - 子元素選擇器(E>F) - 相鄰...

Scorpion 2019-08-29 12:14 評論0 收藏0
《Python web開發》筆記三: CSS基礎

摘要：計算方式一個行內樣式，一個，一個屬性選擇器或者偽類，一個元素名，或者偽元素。其他規則見拓展閱讀。絕對定位設置了絕對定位之后，元素脫離文檔流，其他的元素會調整位置來彌補它偏離后剩下的空隙。 CSS常用選擇器 - 通配符選擇器 * - id選擇器(id #) - 類選擇器(class .) - 元素選擇器(E) - 后代選擇器(E F) - 子元素選擇器(E>F) - 相鄰...

qylost 2019-07-31 12:23 評論0 收藏0
【零基礎入門】 css學習筆記（4）布局與定位介紹

摘要：內聯元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設置屬性，兩個內聯元素并排擺放，但只有左右方向有。還能與其它內聯元素并排。寫在前面：作為一個剛開始寫技術博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應該就是寫技術博客的好處之一：能給自己增加成就感和驅動力。最近關于css布局和定位相關內容整理地有點慢，因為同時在做freecodecamp上的題，所以節奏有點...

nevermind 2019-08-30 15:53 評論0 收藏0
【CSS學習筆記】絕對定位的父類參照物的確定

摘要：今天看定位的課程，了解到一個元素要設置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素。第三步，在第二步的基礎上給添加屬性聲明小結唉，這次卻被擒獲了唉，怎么回事沒錯，做絕對定位的祖先參照物，是設置了相對定位且離最近的那個祖先類元素。今天看CSS定位的課程，了解到一個元素要設置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素html。這個默認根元素已經明確，但是祖先類元...

cooxer 2019-08-28 18:28 評論0 收藏0