Question

这是一个JSFiddle：http://jsfiddle.net/AndyMP/5NzYm/1/

我正在尝试将Blog元素放在第三个容器的左上角。但它的位置在页面的左上角。

<home class="grid_block">2</home>
    <home class="grid_block">3</home>
    <home class="grid_block">
        <block class="update_type">Blog</block>
</home>

home.grid_block {
    float: left;
    overflow: hidden;
    display: inline-block;
    height: 224px;
    width: 23.35%;
    margin: 0 2.2% 2.2% 0;
    background-color: #CCC;
}
block.update_type {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    padding: 25px;
    text-align: center;
    background: #313131;
}

Answer 1

将position:relative;添加到容器中：

home.grid_block {
    position: relative;
    float: left;
    overflow: hidden;
    display: inline-block;
    height: 224px;
    width: 23.35%;
    margin: 0 2.2% 2.2% 0;
    background-color: #CCC;
}

Answer 2

轻松修复。只需将position:relative添加到home.grid_block

即可

home.grid_block {
    float: left;
    overflow: hidden;
    display: inline-block;
    height: 224px;
    width: 23.35%;
    margin: 0 2.2% 2.2% 0;
    background-color: #CCC;
    position:relative;
}

<强> jsFiddle example

绝对定位的元素相对于其最近定位的祖先定位。你只需要让那个祖先成为.grid_block。

Answer 3

position: relative选择器上需要home.grid-block样式。父容器要求具有绝对定位子项的位置相对。

无法在容器内定位元素

3 个答案: