我如何停止框大小调整边框移动内容

Question

我正在使用许多div，这些div绝对将子div放在其中。

我要做的是在div中放置一个边框，但不要与内部的绝对定位元素进行交互。

（几乎像浮动边框）

我尝试使用大纲，但这不起作用，因为它真的需要它在.box divs

我也尝试了盒子阴影插图，但这仍然会移动内容。

我有什么方法可以这样做吗？

    .box {
        height:200px;
        width:100px;
        background:red;
        border-collapse: collapse;
        position:relative;
        display:inline-block;
    }
    
    .box:hover {
        border:22px solid black;
        border-collapse: collapse;
        box-sizing:border-box;
    }
    .silly {
        color:#ffffff;
        position:absolute;
        left:0px;
        top:0;
    }
    .silly1 {
        color:#ffffff;
        position:absolute;
        left:30px;
        top:160px;
    }
    .silly2 {
        color:#ffffff;
        position:absolute;
        right:0;
        top:90px;
    }
    .silly3 {
        color:#ffffff;
        position:absolute;
        left:10px;
        top:40px;
    }

<div class="box">

        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>
    
    <div class="box">
        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>
    
    <div class="box">
        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>

here is the DEMO

Answer 1

为您的box创建一个容器并向其添加position: relative，而不是将其添加到box：

＆＃13;

＆＃13;

        .box-container {
            position:relative;
        }


        .box {
            height:200px;
            width:100px;
            background:red;
            border-collapse: collapse;
            display:inline-block;
        }
        
        .box:hover {
            border:22px solid black;
            border-collapse: collapse;
            box-sizing:border-box;
        }
        .silly {
            color:#ffffff;
            position:absolute;
            left:0px;
            top:0;
        }
        .silly1 {
            color:#ffffff;
            position:absolute;
            left:30px;
            top:160px;
        }
        .silly2 {
            color:#ffffff;
            position:absolute;
            right:0;
            top:90px;
        }
        .silly3 {
            color:#ffffff;
            position:absolute;
            left:10px;
            top:40px;
        }

＆＃13;

<div class="box-container">
    <div class="box">

        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
    </div>
</div>
 

＆＃13;

＆＃13;

＆＃13;

Answer 2

在.box元素中添加一个额外的子div，并将当前的.box:hover样式应用于它。确保这个新的子div为position:absolute，将其从“流”中删除。

另外，我倾向于使用box-sizing: border-box;选择器将*应用于所有元素。

*{
  
  box-sizing: border-box;
  }
.box {
        height:200px;
        width:100px;
        background:red;
        border-collapse: collapse;
        position:relative;
        display:inline-block;
    }
    
    .border{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      }
    .box:hover .border {
        border:22px solid black;
    }
    .silly {
        color:#ffffff;
        position:absolute;
        left:0px;
        top:0;
    }
    .silly1 {
        color:#ffffff;
        position:absolute;
        left:30px;
        top:160px;
    }
    .silly2 {
        color:#ffffff;
        position:absolute;
        right:0;
        top:90px;
    }
    .silly3 {
        color:#ffffff;
        position:absolute;
        left:10px;
        top:40px;
    }

<div class="box">
        <div class="border"></div>
        <div class="silly">I am box</div>
        <div class="silly1">1</div> 
        <div class="silly2">2</div> 
        <div class="silly3">3</div> 
</div>