溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS如何讓子容器超出父元素的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
實現
在標準的正常的情況下，只能使用 絕對定位 來完成。
第一步：父容器定位設置為 relative（相對定位）。
第二步：子容器定位設置為 absolute（絕對定位）。
<div id="a"> <div id="b">我要浮出去！</div> </div>
#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如何讓子容器超出父元素”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
