Question

我正在尝试相对于主图像定位图像-其余图像应位于主图像的左侧，右侧和顶部。

   <div class="top">
            <img class="top__position" src="https://place-hold.it/300x150" alt="">
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
   </div>

我在执行此任务时遇到了麻烦-我将相对位置放在top__position类上，将绝对位置放在top__winner和top上：

.top__winner:nth-of-type(1) {
    position: absolute;
    top: 10px;
    left: 20px;

}

Answer 1

我将相对位置放在top__position

您需要将position: relative放在.top上，而不是.top__position上。

编辑：

position: absolute的绝对位置（即遵循top，left，bottom，right属性）相对于其相对的元素最接近位置的（relative，absolute或fixed）祖先。

Answer 2

我想是这样的

Click here for Javascript Fiddle

.top {
position: relative;
padding: 0 0; // Your image is 80px high so this will give 20px under
height: 100%;
min-height: 350px;
}

.top .top__position {
max-width: calc(100% - 200px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.top div.top__winner {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.top div.top__winner:nth-child(2) {
  right: 0;
  left: unset;
  top: 50%;
  transform: translate(0, -50%);
}

.top div.top__winner:nth-child(3) {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

Answer 3

看起来像是典型的网格布局。

如果我了解该职位：一个在大图片上方的小图片，然后在两边另外两个。

它需要一个3格的网格开始，我使用了用于对齐的边距，您可以重置它们或使用专用的规则来阅读教程，可能的示例如下：

.top {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: max-content;/* shrinks it to the width used by the content */
  margin: auto;/* if you want it at center */
  background:tomato; /* demo, to see where it stands */
}

.top>img {/* Note :this one is nth-child(1) , first child of .top*/
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.top__winner:nth-child(2) {
  grid-column: 2;
  margin: auto;
}

.top__winner:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  margin: auto 2px;
}

.top__winner:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
  margin: auto 2px;
}

<div class="top">
  <img class="top__position" src="https://place-hold.it/300x150" alt="">
  <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>
  <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>
  <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>
</div>

一些有用的资源：

https://gridbyexample.com/和

https://css-tricks.com/snippets/css/complete-guide-grid/

grid-template-columns ， grid-template-rows

用空格分隔的值列表定义网格的列和行。这些值表示轨道大小，它们之间的间距表示网格线。

grid-column ， grid-row

分别为grid-column-start + grid-column-end和grid-row-start + grid-row-end的简写。

相对于图片定位元素

3 个答案: