css奇怪布局（一）

施玥喵

已于 2022-04-09 17:52:46 修改

阅读量393

点赞数

分类专栏： css 文章标签： css

于 2022-04-07 11:58:51 首次发布

本文链接：https://blog.csdn.net/macangyewangs/article/details/124011051

版权

本文介绍了CSS中一种独特的布局方式，旨在确保底部背景图不遮挡li元素。通过使用相对定位和绝对定位，配合z-index属性，实现了背景图与列表元素的层次分离。具体做法包括将.newtustudy作为相对定位父元素，.newtustudy_bg作为绝对定位的线条背景图，并为ul添加底部内补丁以匹配背景图高度，最后将最后一个li标签绝对定位并设置更高的z-index。

摘要由CSDN通过智能技术生成

css 奇怪布局（思路）

记录日常布局

这个布局时有一个底部背景图，不能遮挡li标签。这边做了.newtustudy（父亲）相对定位。

.newtustudy_bg 线条背景图绝对定位在底部， z-index: 0;

ul { padding-bottom: 1200px;} 1200px是 .newtustudy_bg的高度。

最后一个li标签绝对定位，且 z-index: 1；

<template>
  <div class="newtustudy">
    <ul>
      <li v-for="(i, index) in arrlist" :key="index">
        <div class="ql-editor newtustudy_box" v-html="i.remark"></div>
      </li>
      <div class="newtustudy_bg"></div>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      arrlist: [
        {
          remark:
            "<p>电子显微镜成像原理电子显微镜成像原理电子显微镜成像原理电子显微镜成像原理电子显微镜成像原理电子显微镜成像原理电子显微镜成像原理</