Question

我正在尝试在父div的角落设置4 div s的位置。我有以下HTML：

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

和以下CSS：

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: relative;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
}

我无法理解为什么.res div没有位于角落......

我该如何解决这个问题？

JSFIDDLE

Answer 1

您需要将.res的排名类型更改为absolute，并在课程position:relative中插入resize
绝对div需要包含在div中，其位置相对于工作正常。
试试这个：

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

DEMO

Answer 2

为了实现目标，您必须使用position:absolute;作为.res div。绝对定位的div（在您的示例中为.resize）的父级必须相对定位。

更多信息here

<强> FIDDLE

CSS：

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position:absolute;

}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    position: relative;
    width: 100px;
    background: red;
    height: 100px;
}

Answer 3

您使用position: relative作为小矩形。这意味着相对于原始位置。

要将它们放在相对于其父级的角落中，您必须使用

.resize {
    position: relative;
}
.resize .res {
    position: absolute;
}

请参见修改后的JSFiddle

Answer 4

这是你想要完成的吗？

HTML：

<div class="resize">
    <div class="n w res"></div>
    <div class="n e res"></div>
    <div class="s e res"></div>
    <div class="s w res"></div>
</div>

的CSS：

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

demo

属性position会创建一个新的block formatting context。此上下文将与定义了position属性的下一个祖先相关。

Answer 5

我会调整resize div relative和包含的四个div absolute（假设四个div应该 in resize div）：

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: 0px; }
.resize .res.s { bottom: 0px; }
.resize .res.w { left: 0px; }
.resize .res.e { right: 0px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 6

你需要给出相对于resize div的位置并且在内部div将是绝对的位置。

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position: relative;
}

Answer 7

添加位置：相对于.resize和position：absolute to .resize .res

http://jsfiddle.net/flocsy/54kuF/8/

.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute;
}

.resize .res.n { top: -4px; }
.resize .res.s { bottom: -4px; }
.resize .res.w { left: -4px; }
.resize .res.e { right: -4px; }

.resize {
    width: 100px;
    background: red;
    height: 100px;
    position:relative;
}

Answer 8

对于position，您必须设置parent as relative和child as absolute

演示

你没有设置父级的position，这就是错误：

.resize{
   position: relative; /*this was missing */
}
.resize .res {
    width: 6px;
    height: 6px;
    border: 1px solid black;
    position: absolute; /*this was updated*/
}

将4个div（孩子）放在父母的角落里

8 个答案: