按钮使用绝对定位时，不像页面上的其他绝对定位元素一样行为一致。

huangapple
go评论88阅读模式
英文:

Button with absolute positioning not behaving like other absolutely positioned elements on page

问题

I have a fairly simple "promo banner" container, which is basically just an image with some overlayed text and a button. I'm using https://www.w3schools.com/howto/howto_css_image_text.asp as a reference with the outer container (.promo-banner) positioned relative, with all child elements positioned absolute.

This has worked fine until I introduced my button, which has pre-set styles from another component (position: relative) but I added a button-container with absolute positioning to offset that, regardless I cannot achieve the button displaying how I expect (below the p) without using hacky top/bottom properties with lots of px offset.

  1. .promo-banner {
  2.   position: relative;
  3.   img {
  4.     position: absolute;
  5.     width: 1440px;
  6.     height: 671px;
  7.   }
  8.   .banner-content {
  9.     position: absolute;
  10.     padding-top: 222px;
  11.     padding-left: 56px;
  12.   }
  13.   h2 {
  14.     font-size: 44px;
  15.     margin-bottom: 24px;
  16.     color: white;
  17.     font-style: italic;
  18.     span {
  19.       font-size: 44px;
  20.       padding-top: 8px;
  21.       font-style: normal;
  22.     }
  23.   }
  24.   p {
  25.     position: absolute;
  26.     font-size: 16px;
  27.     color: white;
  28.     margin-bottom: 24px;
  29.   }
  30.   .button-container {
  31.     position: absolute;
  32.   }
  33.   .link-btn {
  34.     position: relative;
  35.     color: green;
  36.     background-color: transparent;
  37.     font-size: 16px;
  38.     border: 0;
  39.     padding: 0;
  40.   }
  41.   .link-btn span {
  42.     font-size: 16px;
  43.     padding-right: 12px;
  44.     padding-bottom: 4px;
  45.   }
  46.   .link-btn span::after {
  47.     position: absolute;
  48.     content: '';
  49.     border-bottom: 2px solid green;
  50.     width: 80%;
  51.     bottom: 0;
  52.     left: 0;
  53.   }
  54. }
  1. <div class="promo-banner">
  2.   <img src="../../assets/images/promo-banner.png" alt="Promo banner" />
  3.   <div class="banner-content">
  4.     <h2>
  5.       My content<span>that displays on an image</span>
  6.     </h2>
  7.     <p>
  8.       A magnificent piece of copy with a button below...
  9.     </p>
  10.     <div class="button-container">
  11.       <button type="button">
  12.         <span>Button link</span>
  13.       </button>
  14.     </div>
  15.   </div>
  16. </div>
英文:

I have a fairly simple "promo banner" container, which is basically just an image with some overlayed text and and a button. I'm using https://www.w3schools.com/howto/howto_css_image_text.asp as a reference with the outer container (.promo-banner) positioned relative, with all child elements positioned absolute.

This has worked fine until I introduced my button, which has pre-set styles from another component (position: relative) but I added a button-container with absolute positioning to offset that, regardless I cannot achieve the button displaying how I expect (below the p) without using hacky top/bottom properties with lots of px offset.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .promo-banner {
  2.   position: relative;
  3.   img {
  4.     position: absolute;
  5.     width: 1440px;
  6.     height: 671px;
  7.   }
  8.   .banner-content {
  9.     position: absolute;
  10.     padding-top: 222px;
  11.     padding-left: 56px;
  12.   }
  13.   h2 {
  14.     font-size: 44px;
  15.     margin-bottom: 24px;
  16.     color: white;
  17.     font-style: italic;
  18.     span {
  19.       font-size: 44px;
  20.       padding-top: 8px;
  21.       font-style: normal;
  22.     }
  23.   }
  24.   p {
  25.     position: absolute;
  26.     font-size: 16px;
  27.     color: white;
  28.     margin-bottom: 24px;
  29.   }
  30.   .button-container {
  31.     position: absolute;
  32.   }
  33.   .link-btn {
  34.     position: relative;
  35.     color: green;
  36.     background-color: transparent;
  37.     font-size: 16px;
  38.     border: 0;
  39.     padding: 0;
  40.   }
  41.   .link-btn span {
  42.     font-size: 16px;
  43.     padding-right: 12px;
  44.     padding-bottom: 4px;
  45.   }
  46.   .link-btn span::after {
  47.     position: absolute;
  48.     content: &#39;&#39;;
  49.     border-bottom: 2px solid green;
  50.     width: 80%;
  51.     bottom: 0;
  52.     left: 0;
  53.   }
  54. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;promo-banner&quot;&gt;
  2.   &lt;img src=&quot;../../assets/images/promo-banner.png&quot; alt=&quot;Promo banner&quot; /&gt;
  3.   &lt;div class=&quot;banner-content&quot;&gt;
  4.     &lt;h2&gt;
  5.       My content&lt;span&gt;that displays on an image&lt;/span&gt;
  6.     &lt;/h2&gt;
  7.     &lt;p&gt;
  8.       A magnificent piece of copy with a button below..
  9.     &lt;/p&gt;
  10.     &lt;div class=&quot;button-container&quot;&gt;
  11.       &lt;button type=&quot;button&quot;&gt;
  12.         &lt;span&gt;Button link&lt;/span&gt;
  13.       &lt;/button&gt;
  14.     &lt;/div&gt;
  15.   &lt;/div&gt;
  16. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的内容：

当您为.banner-content使用position: absolute;作为容器时，您不需要将position: absolute;应用于其子元素，这是导致问题的原因，我在这里注释掉了不必要的代码：

  1. .promo-banner {
  2.   position: relative;
  3.   img {
  4.     position: absolute;
  5.     width: 1440px;
  6.     height: 671px;
  7.   }
  8.   .banner-content {
  9.     position: absolute;
  10.     padding-top: 222px;
  11.     padding-left: 56px;
  12.   }
  13.   h2 {
  14.     font-size: 44px;
  15.     margin-bottom: 24px;
  16.     color: white;
  17.     font-style: italic;
  18.     span {
  19.       font-size: 44px;
  20.       padding-top: 8px;
  21.       font-style: normal;
  22.     }
  23.   }
  24.   p {
  25.     // position: absolute;
  26.     font-size: 16px;
  27.     color: white;
  28.     margin-bottom: 24px;
  29.   }
  30.   // .button-container {
  31.   //   position: absolute;
  32.   // } 您也删除了按钮的容器。
  33.   .link-btn {
  34.     position: relative;
  35.     color: green;
  36.     background-color: transparent;
  37.     font-size: 16px;
  38.     border: 0;
  39.     padding: 0;
  40.   }
  41.   .link-btn span {
  42.     font-size: 16px;
  43.     padding-right: 12px;
  44.     padding-bottom: 4px;
  45.   }
  46.   .link-btn span::after {
  47.     position: absolute;
  48.     content: &quot;&quot;;
  49.     border-bottom: 2px solid green;
  50.     width: 80%;
  51.     bottom: 0;
  52.     left: 0;
  53.   }
  54. }
英文:

When you use position: absolute; for .banner-content as a container you don't need to apply position: absolute; to it's children, which is cause the problem here, I comment out the unnecessary code here:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .promo-banner {
  2.   position: relative;
  3.   img {
  4.     position: absolute;
  5.     width: 1440px;
  6.     height: 671px;
  7.   }
  8.   .banner-content {
  9.     position: absolute;
  10.     padding-top: 222px;
  11.     padding-left: 56px;
  12.   }
  13.   h2 {
  14.     font-size: 44px;
  15.     margin-bottom: 24px;
  16.     color: white;
  17.     font-style: italic;
  18.     span {
  19.       font-size: 44px;
  20.       padding-top: 8px;
  21.       font-style: normal;
  22.     }
  23.   }
  24.   p {
  25.     // position: absolute;
  26.     font-size: 16px;
  27.     color: white;
  28.     margin-bottom: 24px;
  29.   }
  30.   // .button-container {
  31.   //   position: absolute;
  32.   // } You Remove the button&#39;s container too.
  33.   .link-btn {
  34.     position: relative;
  35.     color: green;
  36.     background-color: transparent;
  37.     font-size: 16px;
  38.     border: 0;
  39.     padding: 0;
  40.   }
  41.   .link-btn span {
  42.     font-size: 16px;
  43.     padding-right: 12px;
  44.     padding-bottom: 4px;
  45.   }
  46.   .link-btn span::after {
  47.     position: absolute;
  48.     content: &quot;&quot;;
  49.     border-bottom: 2px solid green;
  50.     width: 80%;
  51.     bottom: 0;
  52.     left: 0;
  53.   }
  54. }

<!-- end snippet -->

答案2

得分: 1

要在图像上叠加文本，只需在图像上使用position: absolute。其他元素可以在.promo-banner div内静态定位。只需从它们中删除position:absolute;，按钮将出现在段落元素下面。

标记的代码如下：

  1. <div class="promo-banner">
  2.   <img src="https://placekitten.com/1440/671" alt="Promo banner" />
  3.   <div class="banner-content">
  4.     <h2>
  5.       我的内容<span>显示在图像上</span>
  6.     </h2>
  7.     <p>
  8.       一个华丽的文本，下面有一个按钮...
  9.     </p>
  10.     <div class="button-container">
  11.       <button type="button">
  12.         <span>按钮链接</span>
  13.       </button>
  14.     </div>
  15.   </div>
  16. </div>

请注意，代码中已经删除了positon: absolute。

英文:

To overlay your text on your image you only need to use position: absolute on your image. The others can be positioned statically within your .promo-banner div. Just remove the position:absolute; from them and the button will appear below the p element

Marked up code below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .promo-banner {
  2.   position: relative;
  3. }
  5. .promo-banner img {
  6.   position: absolute;
  7.   width: 1440px;
  8.   height: 671px;
  9. }
  11. .promo-banner .banner-content {
  12.   position: absolute;
  13.   padding-top: 222px;
  14.   padding-left: 56px;
  15. }
  17. .promo-banner h2 {
  18.   font-size: 44px;
  19.   margin-bottom: 24px;
  20.   color: white;
  21.   font-style: italic;
  22. }
  24. .promo-banner h2 span {
  25.   font-size: 44px;
  26.   padding-top: 8px;
  27.   font-style: normal;
  28. }
  30. .promo-banner p {
  31.   /*positon: absolute deleted this */
  32.   font-size: 16px;
  33.   color: white;
  34.   margin-bottom: 24px;
  35. }
  37. .promo-banner .button-container {
  38.   /*positon: absolute deleted this */
  39. }
  41. .promo-banner .link-btn {
  42.   position: relative;
  43.   color: green;
  44.   background-color: transparent;
  45.   font-size: 16px;
  46.   border: 0;
  47.   padding: 0;
  48. }
  50. .promo-banner .link-btn span {
  51.   font-size: 16px;
  52.   padding-right: 12px;
  53.   padding-bottom: 4px;
  54. }
  56. .promo-banner .link-btn span::after {
  57.   position: absolute;
  58.   content: &quot;&quot;;
  59.   border-bottom: 2px solid green;
  60.   width: 80%;
  61.   bottom: 0;
  62.   left: 0;
  63. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;promo-banner&quot;&gt;
  2.   &lt;img src=&quot;https://placekitten.com/1440/671&quot; alt=&quot;Promo banner&quot; /&gt;
  3.   &lt;div class=&quot;banner-content&quot;&gt;
  4.     &lt;h2&gt;
  5.       My content&lt;span&gt; that displays on an image&lt;/span&gt;
  6.     &lt;/h2&gt;
  7.     &lt;p&gt;
  8.       A magnificent piece of copy with a button below..
  9.     &lt;/p&gt;
  10.     &lt;div class=&quot;button-container&quot;&gt;
  11.       &lt;button type=&quot;button&quot;&gt;
  12.         &lt;span&gt;Button link&lt;/span&gt;
  13.       &lt;/button&gt;
  14.     &lt;/div&gt;
  15.   &lt;/div&gt;
  16. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月13日 17:43:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76003973.html
  • css
  • css-position
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定