Html 左位置为负数的内联div不能占用其父div的某些部分

我有一个问题，如果我将

.info

的

宽度更改为大于
120px
的值，那么它将向下推红色
div
。用粉红色表示的空间似乎不能被红色
div
占据

现在，我怀疑这是因为我把
左：-60px
放在
.info
和
.vertical\u shadow
上


.container{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
}
国际海事处{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
左：-60px；
背景颜色：绿色；
}
.info{
左：-60px；
背景颜色：蓝色；
}
.备忘录{
背景色：红色；
}


.集装箱{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
}
国际海事处{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
位置：绝对位置；
左：-60px；
背景颜色：绿色；
}
.info{
左：-60px；
位置：绝对位置；
背景颜色：蓝色；
}
.备忘录{
位置：绝对位置；
背景色：红色；
}

.集装箱{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
}
国际海事处{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
位置：绝对位置；
左：-60px；
背景颜色：绿色；
}
.info{
左：-60px；
位置：绝对位置；
背景颜色：蓝色；
}
.备忘录{
位置：绝对位置；
背景色：红色；
}

.集装箱{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
}
国际海事处{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
位置：绝对位置；
左：-60px；
背景颜色：绿色；
}
.info{
左：-60px；
位置：绝对位置；
背景颜色：蓝色；
}
.备忘录{
位置：绝对位置；
背景色：红色；
}

.集装箱{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
}
国际海事处{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
位置：绝对位置；
左：-60px；
背景颜色：绿色；
}
.info{
左：-60px；
位置：绝对位置；
背景颜色：蓝色；
}
.备忘录{
位置：绝对位置；
背景色：红色；
}
相对
定位实际上不会移动元素。它会移动视觉渲染的位置。它所在的空间由浏览器为其保留。您可以尝试使用负边距

此演示说明：


我想这就是你想要实现的，但有点不清楚


.container{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
z指数：-11；
}
img，
div{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
左边距：-60px；
背景颜色：绿色；
}
.info{
左边距：-60px；
背景颜色：蓝色；
}
.备忘录{
背景色：红色；
}
相对
定位实际上不会移动元素。它会移动视觉渲染的位置。它所在的空间由浏览器为其保留。您可以尝试使用负边距

此演示说明：


我想这就是你想要实现的，但有点不清楚


.container{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
z指数：-11；
}
img，
div{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
左边距：-60px；
背景颜色：绿色；
}
.info{
左边距：-60px；
背景颜色：蓝色；
}
.备忘录{
背景色：红色；
}
相对
定位实际上不会移动元素。它会移动视觉渲染的位置。它所在的空间由浏览器为其保留。您可以尝试使用负边距

此演示说明：


我想这就是你想要实现的，但有点不清楚


.container{
位置：相对位置；
背景颜色：粉红色；
宽度：480px；
高度：120px；
z指数：-11；
}
img，
div{
位置：相对位置；
浮动：左；
宽度：120px；
高度：120px；
背景色：黑色；
}
.垂直阴影{
左边距：-60px；
背景颜色：绿色；
}
.info{
左边距：-60px；
背景颜色：蓝色；
}
.备忘录{
背景色：红色；
}
相对
定位实际上不会移动元素。它会移动视觉渲染的位置。它所在的空间由浏览器为其保留。您可以尝试使用负边距

此演示说明：


我想这是什么
<div class="container">
    <img class="photo">
    <div class="vertical_shadow">
    </div>
    <div class="info">
    </div>
    <div class="memo">
    </div>
</div>
<style>
    .container{
        position: relative;
        background-color: pink;
        width: 480px;
        height: 120px;
    }
    img, div{
        position: relative;
        float: left;
        width: 120px;
        height: 120px;
        background-color: black;
    }
    .vertical_shadow{
        position: absolute;
        left: -60px;
        background-color: green;
    }
    .info{
        left: -60px;
        position: absolute;
        background-color: blue;
    }
    .memo{
        position: absolute;
        background-color: red;
    }
</style>