css - 围绕 float 元素绝对定位？

Question

在attached screenshot我有固定宽度和相对定位的播客剧集。如您所见，播客剧集编号(绿色圆圈)绝对位于播客剧集中。

但是，我还有一个向右浮动的侧边栏，在这种情况下，播客剧集应该环绕侧边栏，就像他们现在所做的那样。

我的问题是:在这种情况下，有什么方法可以在侧边栏旁边显示相对于包装剧集(右上角)的播客剧集编号？

HTML

<main>
    <article class="podcasts">
        <section class="podcast-episode">
            <div class="podcast-id">68</div>
        </section>
        <section class="podcast-episode">
            <div class="podcast-id">67</div>
        </section>
    </article>
    <aside class="sidebar">
        <section class="advert"></section>
        <section class="enews"></section>
    </aside>
</main>

CSS

.podcasts {
    max-width: 900px;
}

.podcast-episode {
    position: relative;
}

.podcast-id {
    position: absolute;
    top: -8px;
    right: -10px;
}

.sidebar {
    width: 300px;
    float: right;
}

Here is a rough CodePen示例的详细信息。

Answer 1

试试这个。为此，您必须将 position:relative 赋予 .podcast-episode 类并移除 overflow:hidden。

.container{
   width:96%;
   margin:0 auto;
}
 #sidebar {
   width: 300px;
   float: right;
   margin: 0 6em 3em;
}
 article {
   display: block;
}
 .podcast {
   position: relative;
  /*max-width: 900px;*/
   margin: 4em auto;
}
 .podcast-episode {
   background-color: rgba(0,0,0,0.025);
   border-radius: 5px;
   margin-bottom: 4em;
  /*overflow: hidden;*/
   display: flex;
   flex-flow: row wrap;
   counter-increment: numbered -1;
   z-index: 1;
   position: relative;
}
 .podcast-episode:before {
   content: counter(numbered);
   position: absolute;
   top: -8px;
   right: -10px;
   background-color: #85a463;
   border-radius: 50%;
   height: 30px;
   width: 30px;
   line-height: 30px;
   text-align: center;
   color: #fff;
   font-size: 0.7em;
}
 .podcast-episode .podcast-info {
   width: 100%;
}
 .podcast-episode .podcast-image {
   width: 125px;
   height: 125px;
   float: left;
   line-height: 0;
   margin-right: 1.5em;
}
 .podcast-episode .podcast-image img {
   width: 100%;
   height: auto;
}
 .podcast-episode .podcast-title {
   font-size: 1.15em;
   margin: 0 0 0.25em;
   padding-top: 1.15em;
}
 .podcast-episode .podcast-meta {
   font-size: 0.825em;
   line-height: 1.5em;
   list-style: none;
   margin: 0;
   padding: 0;
}
 .podcast-episode .podcast-meta li {
   display: inline-block;
   margin-right: 0.75em;
}
 .podcast-episode .podcast-meta li svg {
   opacity: 0.8;
}
 .podcast-episode .podcast-summary {
   font-size: 0.9em;
   line-height: 1.5em;
   padding: 1.25em 1.5em 1.5em;
   display: none;
}
 .podcast-episode .podcast-audio {
   width: 100%;
}

<div class="container">
<aside id="sidebar">
  <div id="ad-sidebar">
    <div class="adspace">
      <a href="https://www.rioproducts.com/freshwater/fly-line" target="_blank">
      <img src="https://www.flyandstream.com/wp-content/uploads/2018/02/ad-300x600-rio.jpg" alt="Rio Products">
      </a>
      <span class="ad-meta"><a href="https://www.flyandstream.com/advertise/">Advertise with us</a></span>
    </div>
  </div>
</aside>
<article>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
  <div class="podcast">
    <div class="podcast-episode">
      <div class="podcast-info">
        <div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
        <h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
        <ul class="podcast-meta">
          <li class="podcast-date">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <time itemprop="datePublished" datetime="1522376107">5 days ago</time>
          </li>
          <li class="podcast-duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            49:00
          </li>
          <li class="podcast-details">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            <a href="" title="View summary of podcast episode">View summary</a>
          </li>
        </ul>
      </div>
      <div class="podcast-summary">Miles Nolte is a writer based out of Montana.  He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal.  I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today.  I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
      <div class="podcast-audio"></div>
    </div>
  </div>
</article>
</div>