1

我正在使用许多 div，其中包含绝对定位的子 div。

我想要做的是在 div 内放置一个边框，但不与里面的绝对定位元素交互。

（几乎像一个浮动边框）

我尝试过使用大纲，但这不起作用，因为它在 .box div 中确实需要它

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

我有什么办法可以做到这一点吗？

    .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>

这是演示

4

2 回答 2

2

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

        .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;
        }
<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>

于 2015-08-20T13:21:46.640 回答
2

在元素内添加一个额外的子 div.box并将当前.box:hover样式应用到它。确保这个新的子 divposition: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>

于 2015-08-20T13:23:00.410 回答