以下是html代碼:

<div class="olablock"</div>

<div class="container">

  <div class="box">
    
    <input type="radio" class="tab-toggle" name="tab-toggle" id="tab1" checked>
    <input type="radio" class="tab-toggle" name="tab-toggle" id="tab2">
    <input type="radio" class="tab-toggle" name="tab-toggle" id="tab3">
    <input type="radio" class="tab-toggle" name="tab-toggle" id="tab4">
    <input type="radio" class="tab-toggle" name="tab-toggle" id="tab5">
    <ul class="tab-list">
      <li class="tab-item">
        <label class="tab-trigger" for="tab1">tab1</label>
      </li>
      <li class="tab-item">
        <label class="tab-trigger" for="tab2">tab2</label>
      </li>
      <li class="tab-item">
        <label class="tab-trigger" for="tab3">tab3</label>
      </li>
            <li class="tab-item">
        <label class="tab-trigger" for="tab4">tab4</label>
      </li>
            <li class="tab-item">
        <label class="tab-trigger" for="tab5">tab5</label>
      </li>
    </ul>
   
    <div class="tab-container">
      <div class="tab-content">content1</div>

      <div class="tab-content">content2</div>
      <div class="tab-content">content3</div>
      <div class="tab-content">content4</div>
      <div class="tab-content">content5</div>
    </div>
  </div>
</div>

這是css代碼:

.olablock {position: relative; width:750px; height: 1500px; background-image: url(https://i.ibb.co/WgNnbQJ/ph.png); border: 10px solid #000;}
/*obr*/
.olablock2 {position: relative; width:150px; height: 200px; background-image: url(https://i.ibb.co/WgNnbQJ/ph.png); border: 6px solid #000;top: 40px;left: -625px; z-index: 2;}
/*obr*/
.chooseola1 {position: relative; font-family: bignoodle; text-transform: uppercase; font-size: 40px; color:#ffffff; padding: 10px; z-index: 2

}
.rectangle {position: relative;
  top: 40px;
  left: -560px;
  height: 10px;
  width: 560px;
  background-color: #000000;
  z-index: 1;
}

.rectangle1 {position: absolute;
  top: 110px;
  left: -10px;
  height: 10px;
  width: 570px;
  background-color: #000000;
  z-index: 1;
}

.wrap {
  width: 60%;
  top: -70px;
  margin: 80px auto;
  position: relative;
}
img {
  position: absolute;
  top: 0;
  left: 55%;
  margin-left: -125px;
}
.left {
  font-family:'Comic Sans MS'; cursive;
  float: left;
  position: absolute;
  top: 10px;
  left: -130px;
  width: 50%;
  right: 100px;
}
.right {
  font-family:'Comic Sans MS'; cursive;
  float: right;
  position: absolute;
  top: 10px;
  left: 340px;
  width: 50%;
}
.left:before, .right:before {
  content: "";
  width: 15px;
  height: 300px;
}
.left:before {
  float: right;
}
.right:before {
  float: left;
}

/контейнер/
.container {
  max-width: 400px;
  margin: 30px auto;
}

.box {
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  background-color: #fff;
  border-radius: 3px;
  overflow: hidden;
  width:750px; height: 1500px
}

.tab-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  position: relative;
}

/* tab list 會動的底線 */
.tab-list::before {
  content: '';
  display: block;
  height: 2px;
  width: 20%;
  position: absolute;
  bottom: 0;
  background-color: #aaa;
  transition: .3s;
}

.tab-item {
  flex: 1;
  text-align: center;
  transition: .3s;
  opacity: 0.5;
}

.tab-toggle {
  display: none;
}

.tab-content {
  display: none;
}

.tab-toggle:nth-child(1):checked ~ .tab-list .tab-item:nth-child(1),
.tab-toggle:nth-child(2):checked ~ .tab-list .tab-item:nth-child(2),
.tab-toggle:nth-child(3):checked ~ .tab-list .tab-item:nth-child(3),
.tab-toggle:nth-child(4):checked ~ .tab-list .tab-item:nth-child(4),
.tab-toggle:nth-child(5):checked ~ .tab-list .tab-item:nth-child(5)
{
  opacity: 1;
}

/* tab bar 底線位移控制 */
.tab-toggle:nth-child(2):checked ~ .tab-list::before {
  transform: translateX(100%);
}

.tab-toggle:nth-child(3):checked ~ .tab-list::before {
  transform: translateX(200%);
}
.tab-toggle:nth-child(4):checked ~ .tab-list::before {
  transform: translateX(300%);
}
.tab-toggle:nth-child(5):checked ~ .tab-list::before {
  transform: translateX(400%);
}
/* 內容顯示控制 */
.tab-toggle:nth-child(1):checked ~ .tab-container .tab-content:nth-child(1),
.tab-toggle:nth-child(2):checked ~ .tab-container .tab-content:nth-child(2),
.tab-toggle:nth-child(3):checked ~ .tab-container .tab-content:nth-child(3),
.tab-toggle:nth-child(4):checked ~ .tab-container .tab-content:nth-child(4),
.tab-toggle:nth-child(5):checked ~ .tab-container .tab-content:nth-child(5)
{
  display: block;
}

.tab-trigger {
  display: block;
  padding: 10px 0;
}

.tab-container {
  padding: 15px 30px;
}

請幫我想想如何實現我的想法。當我在& quot內容# & quot此內容顯示在& quottab # & quot 但是如果我插入，例如，到& quot內容& quot以下代碼:

<div style="position: absolute;
    top: 40px;
    left: 90px;
    width: 120px;
    height: 80px; background-image: url(https://i.ibb.co/xL6f6Zh/el4.png)"
     </div>

然后所有東西都移出，并且不顯示在選項卡上。為什么會這樣，有可能修復嗎？我需要在每個選項卡中插入大量的圖片和文本。 提前感謝您的回復。