在 html 和 css 中制作抽认卡

Question

我在创建抽认卡时遇到了一点问题。当没有文本时，抽认卡的线条位置正确，但当我添加文本时，线条被推到文本下方和抽认卡的边界下方。设置 z-index 并没有解决这个问题。有什么建议吗？

.container {

    display: flex;
    width: 1280px;
    margin: auto;
    margin-top: 100px;
}


#flashcards {
    width: 38vw;
    height: 40vh;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: white;
    padding-top: 25px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
}


.redline{
    width: 38vw;
    height: 40vh;
    background-color: rgba(255, 0, 0, .5);
    height: 1px;
    z-index: 5;
    position: relative;
}

.blueline {
    width: 38vw;
    height: 40vh;
    background-color: rgba(0, 0, 255, .2);
    height: 1px;
    z-index: 5;
    position: relative;
}

#welcome {
    z-index: 10;
    position: relative;
    top: 150px;
    font-size: 3.3em;
}

<section>
  <div class="container">
    <div id="flashcards" class="flashcard">
      <p id="welcome">Welcome <br> Sign in or create an account</p>
      <hr class="redline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
      <hr class="blueline">
    </div>
  </div>
</section>

Answer 1

已更新您提出了新要求：

这对我有用。首先将#welcome 位置更改为固定。接下来我将 'p' 标签更改为“div”标签。

请以整页模式查看示例代码:) 如果您希望它在不使用整页选项更改的情况下工作：font-size: 3.3em;至 font-size：1.3em；

你的代码

我的代码

更新

<style>
    .container {

        display: flex;
        width: 1280px;
        margin: auto;
        margin-top: 100px;
    }
    
    
    #flashcards {
        width: 38vw;
        height: 40vh;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background-color: white;
        padding-top: 25px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.9);
    }
    
    
    .redline{
        width: 38vw;
        height: 40vh;
        background-color: rgba(255, 0, 0, .5);
        height: 1px;
        z-index: 5;
        position: relative;
    }
    
    .blueline {
        width: 38vw;
        height: 40vh;
        background-color: rgba(0, 0, 255, .2);
        height: 1px;
        z-index: 5;
        position: relative;
    }
    
    #welcome {
        z-index: 10;
        position: fixed;
        top: 150px;
        font-size: 3.3em;
    }
</style>
<section>
    <div class="container">
        
      <div id="flashcards" class="flashcard">
        <div id="welcome">Welcome <br> Sign in or create an account</div>

        <hr class="redline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
        <hr class="blueline">
      </div>
    </div>
  </section>

在 html 和 css 中制作抽认卡

Making a flashcard in html and css

html

css

z-index