html 使用绝对元素进入列表项并溢出

tct7dpnv 于 2024-01-04 发布在其他

关注(0)|答案(3)|浏览(256)

我试图制作一张内部有徽章的卡片，徽章延伸到卡片之外，但是父级内部的所有卡片都应该水平滚动，然而我遇到了一个问题，我的徽章元素隐藏在溢出的后面，这对我来说是个问题
selector .c：abstract badge
选择器。B：抽象卡
selector .a：抽象列表卡
CSS

.a {
            width: 150px;
            height: 200px;
            border: solid 1px silver;
            margin: 200px;
            
            /* important */
            display: flex;
            overflow-x: scroll;
        }
        
        .b {
          width: 100px;
          height: 100px;
          border: 1px solid blue;
          
          /* important */
          position: relative;
        }
        
        .c {
            width: 100px;
            height: 100px;
            border: solid 1px red;
            margin-top:-50px;
            
            /* important */
            position: absolute;
        }

字符串
HTML

<div class="a">
        <div class="b">
          <div class="c"></div>
        </div>
        <div class="b">
          <div class="c"></div>
        </div>
    </div>

型
当我为一个有溢出的列表做填充时，我解决了这个问题，但是这在布局中产生了另一个问题，所以我不得不放弃这个解决方案
例如（这不是我的解决方案）

.a {
            width: 150px;
            height: 200px;
            border: solid 1px silver;
            margin: 200px;
            
            /* important */
            display: flex;
            overflow-x: scroll;
            
            padding-top: 50px;
        }

型

.a {
  width: 150px;
  height: 200px;
  border: solid 1px silver;
  margin: 200px;
  /* important */
  display: flex;
  overflow-x: scroll;
}
.b {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  /* important */
  position: relative;
}
.c {
  width: 100px;
  height: 100px;
  border: solid 1px red;
  margin-top: -50px;
  /* important */
  position: absolute;
}

<div class="a">
  <div class="b">
    card
    <div class="c">badge</div>
  </div>
  <div class="b">
    card
    <div class="c">badge</div>
  </div>
</div>

Html

来源：https://stackoverflow.com/questions/77684252/using-absolute-element-into-list-item-with-overflow

3条答案

按热度按时间

ocebsuys1#

也许这可以给你一个起点。我没有“直接”回答这个问题，但更多的是做了我认为你在追求的事情。
我将容器 Package 在一个div中，并给它一个浅绿色的边框，只是为了在窗口中“超级居中”。我还在主体中添加了一个100vh，并将我的新容器超级居中-所以不需要神奇的大边距，只需要让if在窗口的中心流动。
我为你的元素创建了一些网格，并使用你的大小来放置内容;我转换为em，因此基于常见的浏览器默认设置，我将字体大小设置为16 px，因此100px转换为100/16或6.25em，然后我给了卡片一些行/列-创建更多的行和列，因为你认为合适，以便在你想要的地方获得徽章和卡片标签;然后扩展行/列的数量，并将它们放置在其中以捕获您所需的布局。使用这种类型的技术，我发现我很少使用任何“位置”，如绝对等。这些天。

* {
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: grid;
  place-items: center;
  height: 100vh;
}
.base-container {
  display: grid;
  place-items: center;
  border: solid #00ff0040 2px;
  padding: 0.25em;
}
.scroll-container {
  width: 10em;
  height: 12.5em;
  border: solid 1px silver;
  display: flex;
  column-gap: 0.5em;
  overflow-x: scroll;
}
.card-container {
  display: grid;
  grid-template-rows: 1fr;
  column-gap: 1em;
  grid-template-columns: 9.375em;
  grid-template-areas: "card";
}
.b-card {
  grid-area: card;
  display: grid;
  grid-template-rows: 3.125em 1fr;
  grid-template-columns: 3.125em 6.25em;
  grid-template-areas: ". cardlabel" "badge cardlabel";
  border: 1px solid blue;
  display: grid;
  grid-template-rows:
}
.card-badge {
  grid-area: badge;
  border: solid 1px red;
}
.card-label {
  grid-area: cardlabel;
  border: solid 1px #00ffff;
}

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-04

gjmwrych2#

我设法想出了一个解决方案，它看起来不漂亮，但它适合我的需要。显然溢出：scroll对定位一点也不友好，并且不允许可视地显示超出根元素高度的元素（在这个例子中，它是一张卡片），但是如果你尝试使用负值来定位元素，那么一切都会正常，因为该元素没有绝对位置设置，并且具有其自身的高度，滚动容器被强制调整到该高度

<style>
.container {
    display: flex;
    width: 400px;
    border: 1px solid red;
    padding: 5px;
    overflow-x: scroll;
}
.card {
    width: 250px;
    height: 200px;
    border: 1px solid blue;
}
.badge {
    margin: auto;
    border: 1px solid green;
    width: 100px;
    height: 50px;
    margin-bottom: -25px;
}
</style>

个字符

展开查看全部

赞(0）回复(0）举报 2024-01-04

jhkqcmku3#

您可以使用z-index属性来控制元素的堆叠顺序。为badge（.c class）设置一个更高的z-index值，以便它显示在溢出的内容之上。此外，请确保父容器（.a class）具有position：relative属性，因为z-index仅对定位的元素有效。

.a {
    width: 150px;
    height: 200px;
    border: solid 1px silver;
    margin: 200px;
    /* important */
    display: flex;
    overflow-x: scroll;
    position: relative; /* Make sure to add this line */
}
.b {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    /* important */
    position: relative;
}
.c {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    margin-top: -50px;
    /* important */
    position: absolute;
    z-index: 1; /* Add this line to control the stacking order */
}

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-04

我来回答

html 使用绝对元素进入列表项并溢出

3条答案

相关问题

热门标签

最新问答