定位-相對(duì)定位

番茄西紅柿發(fā)布于2019-04-23 13:24 / 2196人閱讀

摘要：定位輸出定位將指定的元素?cái)[放到頁(yè)面的任意位置可以通過(guò)屬性來(lái)設(shè)置元素的定位輸入輸出元素沒(méi)有移動(dòng)，為默認(rèn)值相對(duì)定位輸出當(dāng)開啟了元素的相對(duì)定位以后，而不設(shè)置偏移量時(shí)，元素不會(huì)發(fā)生任何變化輸入偏移量，，，，一般選擇水平方向的



  
    
    定位

　　輸出：

定位：將指定的元素?cái)[放到頁(yè)面的任意位置

可以通過(guò)position屬性來(lái)設(shè)置元素的定位

輸入static：

  .box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: static;
      }

輸出：元素沒(méi)有移動(dòng)，static為默認(rèn)值

relative：相對(duì)定位

.box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: relative;
      }

輸出：當(dāng)開啟了元素的相對(duì)定位以后，而不設(shè)置偏移量時(shí)，元素不會(huì)發(fā)生任何變化

輸入偏移量（left，right，top，bottom，一般選擇水平方向的一個(gè)偏移量和垂直方向的一個(gè)偏移量進(jìn)行定位就可以）：

      .box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: relative;
        left: 50px;
        top: 100px;
      }

輸出：1、相對(duì)定位 relative 是相對(duì)于元素在文檔流中原來(lái)的位置進(jìn)行定位

2、相對(duì)定位會(huì)使元素上升一個(gè)層級(jí)

　　　 3、相對(duì)定位的元素不會(huì)脫離文檔流

插入一個(gè)內(nèi)聯(lián)元素：

      span{
        background-color: rgb(209, 198, 209);
        position: relative;
      }

    span元素

輸出：相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)，塊元素還是塊元素，內(nèi)聯(lián)元素還是內(nèi)聯(lián)元素

云服務(wù)器 GPU云服務(wù)器相對(duì)定位-絕對(duì)定位相對(duì)定位相對(duì)定位自適應(yīng) 人臉定位

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1815.html

相關(guān)文章

構(gòu)建靜態(tài)頁(yè)面之 [ 定位 ]

摘要：定位屬性表示設(shè)置定位絕對(duì)定位固定定位相對(duì)定位絕對(duì)定位表示設(shè)置絕對(duì)定位絕對(duì)定位的注意設(shè)置絕對(duì)定位后，當(dāng)前元素脫離文檔流如果指定元素的父級(jí)元素是元素該元素就是相對(duì)于當(dāng)前頁(yè)面的定位如果指定元素的父級(jí)元素不是元素，父級(jí)元素沒(méi)有開啟定位該元素就定位 position屬性表示設(shè)置定位絕對(duì)定位固定定位相對(duì)定位絕對(duì)定位 position : absolute - 表示設(shè)置絕對(duì)定位...

bingchen 2019-08-29 16:31 評(píng)論0 收藏0
構(gòu)建靜態(tài)頁(yè)面之 [ 定位 ]

摘要：定位屬性表示設(shè)置定位絕對(duì)定位固定定位相對(duì)定位絕對(duì)定位表示設(shè)置絕對(duì)定位絕對(duì)定位的注意設(shè)置絕對(duì)定位后，當(dāng)前元素脫離文檔流如果指定元素的父級(jí)元素是元素該元素就是相對(duì)于當(dāng)前頁(yè)面的定位如果指定元素的父級(jí)元素不是元素，父級(jí)元素沒(méi)有開啟定位該元素就定位 position屬性表示設(shè)置定位絕對(duì)定位固定定位相對(duì)定位絕對(duì)定位 position : absolute - 表示設(shè)置絕對(duì)定位...

ISherry 2019-08-02 16:31 評(píng)論0 收藏0
CSS詳細(xì)解讀定位

摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對(duì)定位，固定定位。我的回答是相對(duì)自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問(wèn)題，主要研究它的定位問(wèn)題。一前言 CSS定位是CSS布局只能夠重要的一環(huán)。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來(lái)的一些特性，熟練使用CSS布局。二正文 1.文檔流布局的概念將窗體自上而下分成一行行，并在每行中按從左至右的...

1treeS 2019-08-30 14:01 評(píng)論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態(tài)定位下，每個(gè)元素在處在常規(guī)文檔流中，它們都是塊級(jí)元素，所以會(huì)在頁(yè)面中自上而下地堆疊。這說(shuō)明絕對(duì)定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對(duì)于頂級(jí)元素在定位。事實(shí)上，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了和位移屬性值，實(shí)際上優(yōu)先級(jí)高于。這是《CSS設(shè)計(jì)指南》的讀書筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動(dòng)和清除介紹了css盒子模型、浮動(dòng)和清除，這一篇介紹 css元素的定位。 ...

paulquei 2019-08-29 13:01 評(píng)論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態(tài)定位下，每個(gè)元素在處在常規(guī)文檔流中，它們都是塊級(jí)元素，所以會(huì)在頁(yè)面中自上而下地堆疊。這說(shuō)明絕對(duì)定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對(duì)于頂級(jí)元素在定位。事實(shí)上，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了和位移屬性值，實(shí)際上優(yōu)先級(jí)高于。這是《CSS設(shè)計(jì)指南》的讀書筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動(dòng)和清除介紹了css盒子模型、浮動(dòng)和清除，這一篇介紹 css元素的定位。 ...

DesGemini 2019-08-01 17:15 評(píng)論0 收藏0
CSS相對(duì)定位和絕對(duì)定位

摘要：三絕對(duì)定位拼爹型絕對(duì)定位不占有位置。父級(jí)有定位絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位絕對(duì)固定或相對(duì)的父元素祖先進(jìn)行定位。絕對(duì)定位的盒子水平垂直居中普通盒子左右居中用即可，但對(duì)于絕對(duì)定位的就無(wú)效了。為什么要學(xué)定位定位是CSS中的難點(diǎn)和重點(diǎn)，特別是后面學(xué)javascript特效時(shí)候，比如實(shí)現(xiàn)下拉菜單、彈框等，要蓋住下面內(nèi)容又不會(huì)影響下面內(nèi)容，比如要超出盒子一部分，比如屏幕中有一個(gè)小彈窗飄來(lái)...

xinhaip 2019-08-30 15:54 評(píng)論0 收藏0