html - 我可以使用纯 CSS 堆叠重叠的元素吗？

coder 2023-08-11 原文

是否可以在容器中放置未知数量的元素，以便在容器不够大时看起来像堆叠在一起？我正在尝试仅使用 HTML 和 CSS 来执行此操作。

如果 parent 比 child 大，这是它的样子。

这是当有更多 child 占据 parent 时我试图完成的事情(填充颜色以显示堆叠顺序):

有些东西我看了但没有运气(也许我错过了什么或者不是那么好):

CSS 计数器 - 仅适用于内容属性
将子级 div 相互嵌套(如 Inception)
CSS flexbox - 它只会包裹或收缩

下面是我正在尝试做的事情:http://codepen.io/vickyleong/pen/VaPBYg . 尝试调整窗口大小。

注意: children 是正方形，但是有重叠堆叠，像级联

我正在使用 Sass，但这是我的代码，仅包含 HTML 和 CSS:

body, * {
  box-sizing: border-box;
  margin: 0;
}

.card {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: #FAFAFA;
  border: 1px solid #F4F4F4;
  box-shadow: 0px 1px 3px 1px #DDD;
}

.card-content {
  margin: 1rem;
}

.student-pic-sm {
  width: 100px;
  height: 100px;
}

.round-pic {
  background-color: #AAA;
  border-radius: 50%;
}

.batch-list-item .card-title h2 {
  margin: 1rem 0;
}
.batch-list-item .card-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
.batch-list-item .student-pic-list {
  height: 100px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.batch-list-item .round-pic {
  box-sizing: border-box;
  display: inline-block;
  border: 3px solid #333;
  overflow: visible;
}
.batch-list-item .round-pic .round-pic {
  margin-left: 25%;
  margin-top: -3px;
}
.batch-list-item .round-pic:nth-child(2n) {
  background-color: #BBB;
}
.batch-list-item .round-pic:nth-child(3n) {
  background-color: #CCC;
}
.batch-list-item .space-filler {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.batch-list-item .students-count {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8rem;
      -ms-flex: 0 0 8rem;
          flex: 0 0 8rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.batch-list-item .students-count p {
  font-size: 16pt;
}

.student-pic-list {
  position: relative;
}
.student-pic-list > div + div {
  position: absolute;
  left: 4%;
}
.student-pic-list > div + div + div {
  left: 8%;
}
.student-pic-list > div + div + div + div {
  left: 12%;
}
.student-pic-list > div + div + div + div + div {
  left: 16%;
}
.student-pic-list > div + div + div + div + div + div {
  left: 20%;
}
.student-pic-list > div + div + div + div + div + div + div {
  left: 24%;
}
.student-pic-list > div + div + div + div + div + div + div + div {
  left: 28%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div {
  left: 32%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div {
  left: 36%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div {
  left: 40%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div {
  left: 44%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 48%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 52%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 56%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 60%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 64%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 68%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 72%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 76%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 80%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 84%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 88%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 92%;
}
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div {
  left: 0%;
  z-index: -1;
}

<div id="batch-1" class="batch-list-item card">
  <div class="card-title">
    <h2>Pending Batch</h2>
  </div>
  <div class="card-content">
    <div class="student-pic-list">
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
      <div class="round-pic student-pic-sm">
      </div>
    </div>
    <div class="students-count">
      <p>14 students</p>
    </div>
  </div>
</div>

最佳答案

除第一个类型外的负边距:

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    background: lavender;
}

#container {
    display: -webkit-flex; /* Safari */    
    display: flex;
    outline: 1px solid hotpink;
}

.inner {
    height: 100px;
    width: 100px;
    margin-left: -50px;   
    -webkit-transition: margin-left 0.3s ease; /* Safari */
    transition:  margin-left 0.3s ease;
    border: 2px dashed black;
    box-sizing: border-box;
    background-color: rgba(255, 0, 255, 0.2);
}

.inner:first-of-type, #container:hover .inner:first-of-type {
    margin-left: 0; 
}

#container:hover .inner {
    margin-left: -30px;  
}

img {
    width: 100px;
    height: 100px;
}

<div id=container>
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div>  
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
</div>

关于html - 我可以使用纯 CSS 堆叠重叠的元素吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36076798/

堆叠 html div student pic css

有关html - 我可以使用纯 CSS 堆叠重叠的元素吗？的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 在 Ruby 中使用匿名模块 - 2
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？最佳答案三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2
我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

html - 我可以使用纯 CSS 堆叠重叠的元素吗？

有关html - 我可以使用纯 CSS 堆叠重叠的元素吗？的更多相关文章

随机推荐