围绕浮动元素绝对定位？

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 class 并删除 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>

围绕浮动元素绝对定位？

Wrapping absolutely positioned around floated elements?

css

css-position

word-wrap

css-float