代码之家 › 专栏 › 技术社区 › drake035

在一系列每一项都有负边距的项目中,如何使每一项出现在前一项的下面?

css

drake035 · 技术社区 · 6 年前

根据项目设计,我需要显示一系列的项目,每个项目部分在下一个项目之上。

利用负边际,我可以做到:

在上面 前一个,而我想实现相反的目标。

怎么用?

Codepen

.container {
    display: flex;
}

.item {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid black;
    background: yellow;
    margin-right: -8px;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

2 回复 | 直到 6 年前

J.T. Houtenbos 6 年前

如果可以颠倒项目顺序,则可以执行以下操作:

挠性箱

.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如果不需要flexbox,可以执行以下操作:

桌子

.container {
  display: table;
}

.item {
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
}

<<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>

André Werlang 6 年前

使用z-index属性,对顶部的数字使用较大的数字。

.item1 {
    z-index: 3;
}
.item2 {
    z-index: 2;
}
.item3 {
    z-index: 1;
}

nathan.medz 6 年前

有点老套,但你可以做一些灵活的魔术,翻转和逆转他们。您只需将容器css更改为以下内容。

.container {
  display: flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
}

.item {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
  order:-1
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

BugsArePeopleToo 6 年前

一点JS的救命之道。。。添加 position: relative; 致 .item 类,这应该有效:

const items = document.querySelectorAll('.item');

if (items) {
  let z = items.length;

  items.forEach((item) => {
    item.style.zIndex = z;
    z--;
  });
}

.container {
  display: flex;
}

.item {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid black;
  background: yellow;
  margin-right: -8px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Bryce Howitson 6 年前

我还没有看到实际的设计,所以不确定它是否会这样工作。但既然秩序很重要(不仅仅是装饰),这里有一种方法。

解决方案确实需要添加额外的元素并知道大小 (例如,如果是垂直重叠和全宽,则不需要大小)

基本上,我们用的是烟和镜子。。。我们的想法是把所有的东西都放在一个容器里 overflow: hidden 然后在顶部添加另一个元素,使溢出隐藏它。:-)

.container {
  display: flex;
  margin-bottom: 30px;
}

.item {
  position: relative;
  overflow: hidden;
  margin: 0 0 0 -10px;
  padding: 0;
}
.item span {
  display:block;
  width: 50px;
  height: 50px;
  border-radius:50%;
  border: 1px solid black;
  background: yellow;


  text-align: center;
  line-height: 50px;
}

.item:before {
  content: '';
  position: absolute;
  top: 0;
  left: -42px;
  width: 50px;
  height: 50px;
  border-radius:50%;
  border: 1px solid black;
  background: aqua;
  z-index: 10;
}
.item:first-child {
  margin-left:0;
}
.item:first-child:before {
  display:none;
}

.example2 .item:before{
  background: yellow;
}

<div class="container">
  <div class="item"><span>A</span></div>
  <div class="item"><span>B</span></div>
  <div class="item"><span>C</span></div>
</div>

<div class="container example2">
  <div class="item"><span>A</span></div>
  <div class="item"><span>B</span></div>
  <div class="item"><span>C</span></div>
  <div class="item"><span>D</span></div>
  <div class="item"><span>E</span></div>
  <div class="item"><span>F</span></div>
  <div class="item"><span>G</span></div>
</div>