在前端開發中，CSS 是必不可少的一部分。它是用來控制網頁樣式的語言，除了能夠制作出優美的頁面外，還有許多實用的功能。其中，子元素溢出是 CSS 中一項重要的功能。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.child {
width: 300px;
height: 300px;
background-color: red;
}

上面代碼中，我們設置了一個父元素的寬高并添加了邊框。我們希望在父元素中放置一個子元素，并讓子元素超出父元素的邊界。為此，我們將子元素的寬高設置為 300px，超出父元素的寬高。

此時，我們會發現子元素的內容已經超出了父元素，由于我們在父元素中設置了 overflow:hidden，所以子元素的超出部分將不會被顯示。

如果我們想讓子元素的內容能夠顯示出來，有以下三種解決方案：

一、修改父元素的 overflow 屬性為 auto 或者 scroll。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
.child {
width: 300px;
height: 300px;
background-color: red;
}

二、設置子元素的 position 為 absolute，然后通過 left、top、bottom、right 屬性來控制子元素的位置。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.child {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: -50px;
}

三、使用 transform 屬性來控制子元素的位置。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.child {
width: 300px;
height: 300px;
background-color: red;
transform: translate(-50px, -50px);
}

以上就是 CSS 中關于子元素溢出的解決方案。我們可以根據實際需求選擇合適的方法，并通過 CSS 創造出符合我們需求的優美頁面。