day06

1.相對定位

  /* 相對定位就是元素在頁面上正常的位置 */
        div{
            width:100px;
            height:100px;
            background: red;
            position: relative;
            left:200px;
            top:200px;
            /* 相對定位一般不使用right,bottom */
            /* right:0px; */
            /* bottom:10px; */
        }

相對定位一般不使用right瑰艘,bottom

2.絕對定位

 .parent{
            width:200px;
            height:200px;
            background-color:red;
            position: relative;
        }
        /* 絕對定位的元素移動的位置,是離它最近的給了定位的父元素 */
        /* left,right,top,bottom */
        .child{
            width:50px;height:50px;background:green;
            position:absolute;
            right:0;
            bottom:0;
        }

絕對定位的元素移動的位置,是離它最近的給了定位的父元素

3.元素水平垂直居中

 .parent{
            position: relative;
            width:300px;
            height:300px;
            background:red;
        }
        .child{
            position:absolute;
            width:50px;
            height:50px;
            background:green;
            left:50%;
            top:50%;
            margin-left:-25px;
            margin-top: -25px;
        }

4.banner

 html,body{
            width:100%;
            height:100%;
        }
        /* 子元素left,top值給百分比,是相對于父元素的width,height而言的 */
        img{
            position:absolute;
            left:50%;
            top:50%;
            width:618px;
            height:128px;
            margin-left:-307px;
            margin-top: -64px;
        }
        body{
            position: relative;
            background:url("images/bg.png") no-repeat center center;
            background-size: cover;

子元素left,top值給百分比,是相對于父元素的width,height而言的

5.search

.search{
            margin:100px;width:240px;
            height:40px;position: relative;
        }
        button{
            position:absolute;top:50%;margin-top: -11px;

            right:5px;width:23px;height:22px;
            background: url("images/icon4.png");border:none;
        }
        input{
            padding-left:20px;border:none;
            border-radius: 30px;outline: none;
            width:220px;height:40px;background:#eee;
        }

6.百度一下

 .search{
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            width:640px;
            height:38px;
            position: relative;
        }
        input{
            border:1px solid #b8b8b8;
            width:540px;
            height:36px;
            position:absolute;
            left:0;
            top:0;
        }
        button{
            color:#fff;
            border:1px solid #3385ff;
            background:#3385ff;
            width:100px;
            height:38px;
            position:absolute;
            right:0;

        }

7.fixed

 div{
            width:20px;
            height:50px;
            background:red;
            position:fixed;
            right:10px;
            bottom:130px;
        }

8.z-index

 /* z-index設(shè)置給了absolute定位元素的堆疊順序 */
        .parent{
            width:300px;height:300px;background: red;
            position: relative;
        }
        .one{
            width:100px;
            height:100px;
            background:green;
            position:absolute;
            z-index:100;
        }
        .two{
            width:200px;
            height:50px;position:absolute;
            background:blue;
            z-index: 101;
        }
        .parent:hover .one{
            z-index: 200;
        }

z-index設(shè)置給了absolute定位元素的堆疊順序

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市搔弄,隨后出現(xiàn)的幾起案子拯坟,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件晴及,死亡現(xiàn)場離奇詭異,居然都是意外死亡嫡锌,警方通過查閱死者的電腦和手機虑稼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門琳钉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蛛倦,你說我怎么就攤上這事歌懒。” “怎么了溯壶?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵及皂,是天一觀的道長。 經(jīng)常有香客問我且改,道長验烧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任又跛,我火速辦了婚禮碍拆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘效扫。我一直安慰自己倔监,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布菌仁。 她就那樣靜靜地躺著浩习,像睡著了一般。 火紅的嫁衣襯著肌膚如雪济丘。 梳的紋絲不亂的頭發(fā)上谱秽,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機與錄音摹迷,去河邊找鬼疟赊。 笑死,一個胖子當(dāng)著我的面吹牛峡碉,可吹牛的內(nèi)容都是我干的近哟。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼鲫寄,長吁一口氣:“原來是場噩夢啊……” “哼吉执!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起地来,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤戳玫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后未斑,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咕宿,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了府阀。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缆镣。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖肌似,靈堂內(nèi)的尸體忽然破棺而出费就,到底是詐尸還是另有隱情,我是刑警寧澤川队,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站睬澡,受9級特大地震影響固额,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜煞聪,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一斗躏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧昔脯,春花似錦啄糙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至静陈,卻和暖如春燕雁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鲸拥。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工拐格, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人刑赶。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓捏浊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親撞叨。 傳聞我的和親對象是個殘疾皇子金踪,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,737評論 1 92
  • CSS 定位 CSS有三種基本的定位機制:普通流,浮動劣领,絕對定位(absolute, fixed):普通流是默認定...
    _空空閱讀 5,724評論 0 15
  • CSS 是什么 css(Cascading Style Sheets)姐军,層疊樣式表,選擇器{屬性:值;屬性:值}h...
    崔敏嫣閱讀 1,475評論 0 5
  • 知識要點梳理 1.相對定位 2.絕對定位 3.元素垂直水平居中 4.搜索框 百度搜索框 5.fixed 6.z-i...
    向陽_095c閱讀 159評論 0 0
  • 七絕·懶覺 曉窗羅帳清秋夢奕锌,幾案鈴鐘喚取輕著觉。 翻枕欹眠還掩耳,猶聞鄰舍讀書聲惊暴。 七絕·懶煮 鄰家炊飯起疏煙饼丘,掬水輕...
    泓穎閱讀 937評論 6 12