Question

我在尝试将h3标记放在图像.featured-image上时（坐在图像顶部）有一些奇怪的问题。当我尝试position: absolute;时..如果<p>中的内容更多或更少，h3将从其位置移开。如果我尝试position: relative;与图像存在较大差距，如果我尝试margin <p>更近或更远，则位置也会移动。如果我使用div将h3标记周围的另一个position relative;换行，然后将h3保留为position: absolute;。它修复了它，但这似乎是一个黑客。

HTML：

 <section class="featured">
              <h1><img src="images/icon-featured.png" width="24px" height="23px" alt="Featured Site Icon"> Featured Site </h1>
              <div class="image-wrap">
                <a href="#">
                  <img class="featured-image" src="images/content-images/image.jpg" width="399px" height= "37px" alt="" />
                </a>
                <h3> Lorem Ipsum </h3>
              </div> <!-- image-wrap -->
              <p> 
                <a href="#">Lorem Ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
        </section><!-- .featured -->

CSS

article h1 img { margin: 0 5px 0 0; }
article .featured { }
article .featured h1 {  }
article .featured .image-wrap { margin: 27px 0 0 0; text-align: center; }
article .featured .image-wrap img { border: 1px solid #8e8d8e; -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 14px rgba(0, 0, 0, .4);
   -o-box-shadow: 0 0 14px rgba(0, 0, 0, .4); box-shadow: 0 0 14px rgba(0, 0, 0, .4); }

article .featured .image-wrap h3 { background: rgba(23, 23, 23, .5); bottom: 66px; font-size: 23px; padding: 10px; position: relative; left: 190px;
   text-align: right; width: 230px;  }

article .featured p { margin: 25px auto; padding: 10px; width: 380px; }

Answer 1

相对位置.image-wrap，但没有任何left / right / top / bottom属性。然后，绝对定位h3并将其移动到您想要的位置。

您遇到的问题是绝对定位的元素必须包含在非静态定位的祖先元素中，否则默认将其相对于html元素定位（这可能是它受以下段落影响的原因）。相对定位的元素仍然是页面流的一部分，因此保留了最初占用的相对定位元素的空间。那是你看到的额外空间。

w3c有一个很好的css定位介绍：http://www.w3schools.com/css/css_positioning.asp，此页面也是如此：http://www.barelyfitz.com/screencast/html-training/css/positioning/

位置元素超过图像

1 个答案: