Question

我还是网络新手，所以这对我来说有点棘手。我有一个班级greenApple01

.greenApple01 {
    width: 256px;
    height: 256px;
    background-image: url("fingertwisterimages/newimages/spritesheet_greenApple.png");
    border: 1px solid red;
    position: absolute;
    top: 290px;
    right: 130px;
}

我还有另一个div yellowApple03。

现在我想要实现的是：

enter image description here

如何根据greenApple01的位置定位yellowApple03？另外，我正在开发移动设备，你能否就如何利用媒体查询提出想法？

Answer 1

如果元素在正常流量中被移除后会被absolute定位，则没有机会相互对齐元素。

如果您计划在同一行的中间垂直对齐元素，则可以display将它们设为inline-block，然后向它们提供vertical-align: middle;声明以进行垂直对齐。

.greenApple01, .yellowApple03 {
    display: inline-block;
    vertical-align: middle;
}

如果要在这些元素之间添加一些空格，可以使用margin。例如，假设.yellowApple03位于.greenApple01之后：

.yellowApple03 { margin-left: 100px; }

还要注意增加元素之间实际空间的gap between inline-block elements，这可能会造成麻烦。

Answer 2

绝对和相对定位是CSS中非常强大和被误解的概念。

http://plnkr.co/edit/nzhONbfFRG17R44EHI5C?p=preview

简而言之，如果你绝对定位某个东西，它将会在最接近的父级别元素中被限制在一个非默认位置。

例如1。

<body>
   <div class='parent'>
       <div class='apple1' style='position:absolute'></div>
       <div class='apple2' style='position:absolute'></div>
   </div>
</body>

在这种情况下，2个苹果将相对于身体定位

例如2。

<body>
   <div class='parent' style='position:relative'>
       <div class='apple1' style='position:absolute'></div>
       <div class='apple2' style='position:absolute'></div>
   </div>
</body>

在这种情况下，2个苹果将与'父'类相对于div定位，因为它具有位置值。

因此，要解决您想要做的事情，请确保您的黄色苹果是青苹果的子元素。这样，你的黄色苹果将被定位在你的青苹果被展示的任何地方。

<body>
    <div class='content'>
        <div class='greenApple01' style='position:absolute'>
            <div class='yellowApple03' style='position:relative'></div>
        </div>
    </div>
</body>

根据css中特定DIV的位置定位其他DIV

2 个答案: