在

Question

我有一个旋转木马，通过在较小的div内放置一个较大的div，其偏移定位为模拟页面。

我的外部固定宽度div周围有一个灰色边框，我注意到内部div的文字位于该边框的顶部。

http://jsfiddle.net/ruqrb567/

<div>
    <div>
    Testing Testing
    </div>
</div>

如何让文字位于边框后面？

编辑：旋转木马的滑动机构需要内部div的宽度，因此无法将其作为解决方案移除。

Answer 1

DEMO

您可以通过添加到您的父div并提供课程

来尝试此操作

overflow:hidden;

Answer 2

选项1

您应该从第二个widht中删除div。你有一个更大的width然后是父div，导致文本越过边界。

    div > div{

        border:0;
        z-index:1;
        color:blue;

    }

<强> DEMO HERE

选项2

或者您可以在标记中添加<p>元素，并添加与父width相同的div

<强> CSS

div
{
    width:44px;
    height:50px;
    border:solid 20px gray;
    z-index:2;
}

div > div{
width: 1000px;
    border:0;
    z-index:1;
    color:blue;

}

div > div > p{
   width: 44px;
    color:blue;
    margin: 0; 
}

<强> HTML

<div>
    <div>
        <p>Testing Testing</p>
    </div>
</div>

<强> DEMO HERE

选项3

您可以将文本放在父div

下

<强> CSS

div > div{
    position: relative;
    width:1000px;
    border:0;
    z-index:-1;
    color:blue;
}

<强> DEMO HERE

Answer 3

您必须删除div > div类的宽度。哪个width:1000px会导致问题。 检查小提琴：http://jsfiddle.net/ruqrb567/

div
{
    width:44px;
    height:50px;
    border:solid 20px gray;
    z-index:2;
}

div > div{

    border:0;
    z-index:1;
    color:blue;

}

<div>
    <div>
    Testing Testing
    </div>
</div>