在 CSS 中，我們可以通過

box-sizing

或者

border-box

來控制盒子的大小，實現盒子大小固定，但是在盒子中的文字卻不能與盒子重疊，常見的解決方式就是讓文字位于盒子下方。

在實現文字位于盒子下方之前，我們需要先確定盒子的高度和寬度。一般來說，盒子的高度和寬度的和等于盒子內容的高度和寬度。

box-sizing: border-box;
width: 200px;
height: 100px;
padding: 10px;

上面的代碼就是一個典型的例子，我們通過

border-box

屬性將盒子的大小設置為 200px * 100px，同時設置盒子的內邊距為 10px。

接下來，我們就可以讓文字位于盒子下方了。我們可以使用 position 定位屬性和 transform 變換屬性實現。

position: relative;
bottom: -50px;
transform: translateY(-50%);

上面的代碼中，我們將盒子的定位屬性設置為相對定位，并讓文字相對于盒子下移 50px。接著，我們使用 transform 屬性對文字進行垂直方向上的移動，讓文字垂直居中于盒子下方。

綜上所述，我們可以通過一些簡單的 CSS 屬性來實現文字位于盒子下方。這些屬性不僅方便實用，而且能夠讓網頁更加美觀。