溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2021-04-13 10:42:08 來源：億速云 閱讀：527 作者：小新 欄目：web開發(fā)

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

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

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

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

前言

有時候，我們需要如下圖這樣一個懸浮效果需求：
css讓元素超出父元素的方法
css讓元素超出父元素的方法

實現(xiàn)

在標(biāo)準(zhǔn)的正常的情況下，只能使用 絕對定位 來完成。
css讓元素超出父元素的方法

第一步：父容器定位設(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; */}

效果圖：
css讓元素超出父元素的方法


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

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

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

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手