定位-相對定位

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

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



  
    
    定位

　　輸出：

定位：將指定的元素擺放到頁面的任意位置

可以通過position屬性來設(shè)置元素的定位

輸入static：

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

輸出：元素沒有移動，static為默認(rèn)值

relative：相對定位

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

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

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

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

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

2、相對定位會使元素上升一個層級

　　　 3、相對定位的元素不會脫離文檔流

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

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

    span元素

輸出：相對定位不會改變元素的性質(zhì)，塊元素還是塊元素，內(nèi)聯(lián)元素還是內(nèi)聯(lián)元素

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1815.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

DesGemini 2019-08-01 17:15 評論0 收藏0
CSS相對定位和絕對定位

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

xinhaip 2019-08-30 15:54 評論0 收藏0