Question

请考虑以下示例：

怎样才能使h2元素浮动到图像的右侧，同时保持在它上面（因此具有绝对位置）？

Answer 1

你的绝对定位不是问题。您的<h2>是其父级宽度的100％，即页面宽度的100％。如果您使用.image显示inline-block，则只占用图片的宽度，您可以在标题中对齐<span>：

.image { 
    position: relative;
    display:inline-block;
}

h2 { 
    position: absolute; 
    top: 160px; 
    right:0;
    width: 100%;
    text-align:right;
}

JSFiddle

Answer 2

是的，使用position:absolute;并设置right:0px;或任何您想要的右侧间距..

Answer 3

我不建议使用这些间隔跨度只是使用填充或边距来实现您的视觉效果。

.image { 
  position: relative; 
  width: 500px;
  padding-top: 160px;
}
.image h2 {
  position: relative;
  right: 0;
}
.image img { 
  position: absolute; 
  top: 0; 
  left: 0;
  z-index: -1;
}
.image h2 span { 
  color: white; 
  font: bold 24px/45px Helvetica, Sans-Serif; 
  letter-spacing: -1px;  
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px; 
  float: right;
  clear: right;
}

http://fiddle.jshell.net/ZQK9x/13/

http://fiddle.jshell.net/ZQK9x/13//show/

Answer 4

似乎没有得到你的要求：

is this what u want?

h2 {
     position:absolute;
     top:10px;
     width: 100%;
     border:1px solid red;
     text-align:right
 }

downvote

this is what u need

首先：代替.image，在您的css中使用img标记

img {
     position: relative;
     width: 100%;
     /* for IE 6 */
 }

第二：如果以百分比设置子维度，请确保父级也设置了它......在这种情况下body,html

body,html{
     width: 100%;
    height:100%
}

CSS Float具有绝对位置

4 个答案: