css讓元素超出父元素的方法

這篇文章主要介紹css讓元素超出父元素的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供柳江網(wǎng)站建設(shè)、柳江做網(wǎng)站、柳江網(wǎng)站設(shè)計(jì)、柳江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、柳江企業(yè)網(wǎng)站模板建站服務(wù)，十年柳江做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

css讓元素超出父元素的實(shí)現(xiàn)方法：1、將父容器定位設(shè)置為“relative”，表示相對定位；2、將子容器定位設(shè)置為“absolute”，表示絕對定位。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

CSS讓子容器超出父元素（子容器懸浮在父容器效果）

前言

有時(shí)候，我們需要如下圖這樣一個(gè)懸浮效果需求：

實(shí)現(xiàn)

在標(biāo)準(zhǔn)的正常的情況下，只能使用 絕對定位 來完成。

第一步：父容器定位設(shè)置為 relative（相對定位）。
第二步：子容器定位設(shè)置為 absolute（絕對定位）。

<p id="a">
   <p id="b">我要浮出去！</p></p>

#a{
  width:400px;
  height:100px;
  background:rgb(0, 0, 0);
  position:relative;/*父元素>相對定位*/}#b{
  width: 150px;
  height:50px;
  background:rgb(185, 155, 255);
  position:absolute;/*子元素>絕對定位*/
  top:-30px;/*控制浮出*/
  /* left:XX; */}

效果圖：

父元素設(shè)置 絕對定位 ，子元素設(shè)置 相對定位 ，即子元素依照父元素進(jìn)行定位。

注意：只有子元素會(huì)脫離文檔流，父元素是相對定位并不會(huì)脫離文檔流，所以不會(huì)造成頁面錯(cuò)位。

以上是“css讓元素超出父元素的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：css讓元素超出父元素的方法
標(biāo)題來源：http://muchs.cn/article8/ihjcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、商城網(wǎng)站、、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)