元素定位html css

-1

当您将鼠标悬停在图片上时，您会看到一个标题，但h1和p位于同一位置，p元素不在h1元素下。元素定位html css

我在做什么错？

HTML

 <section role="main" class="container"> 
     <ol class="thumb-grid group"> 
      <li><img src="img.jpg" alt="img" /> 
      <div class="caption"> 
       <div class="caption-text"> 
        <h1>Header</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
       </div><!-- einde caption-text --> 
      </div><!-- einde caption --> 
      </li>

CSS

.thumb-grid .caption{ 
cursor: pointer; 
position: absolute; 
opacity: 0; 
-webkit-transition:all 0.6s ease-in-out; 
-moz-transition:all 0.6s ease-in-out; 
-o-transition:all 0.6s ease-in-out; 
-ms-transition:all 0.6s ease-in-out; 
transition:all 0.6s ease-in-out; 
} 

.thumb-grid li:hover .caption{ 
opacity: 1; 
background-color: rgba(0,0,0,0.65); 
height: 100%; 
width: 100%; 
z-index: 5; 
position: absolute; 
} 

.thumb-grid .caption-text{ 
color: #fff; 
position: absolute; 
width: 100%; 
height: 100%; 
text-align: left; 
padding-top:8%; 
padding-left:8%; 
} 
.thumb-grid .caption-text h1{ 
font-size: 1em; 
} 
.thumb-grid .caption-text p{ 
font-size: 0.75em; 
}

来源

2014-04-02 user3480982

http://jsfiddle.net/wfRA6/ 它的工作原理？ – QieynaYeen

与我这不工作，我不明白为什么... – user3480982

您使用哪个浏览器来测试代码？我使用G.Chrome测试它。 – QieynaYeen

它似乎对我所有的浏览器我很好地工作，你可以尝试把：

position:relative;

到您.thumb网.caption-text p {这应该会自动将它对齐到你的html下面。我希望这回答你的问题:)

来源

2014-04-02 09:44:42 ByronMcGrath

对不起，我不能明白的地方，什么是你的问题，因为我看到了下代H1

这里在P u能看到测试

http://jsfiddle.net/mp98n/1/

我用你的代码

<section role="main" class="container"> 
    <ol class="thumb-grid group"> 
     <li><img src="img.jpg" alt="img" /> 
     <div class="caption"> 
      <div class="caption-text"> 
       <h1>Header</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      </div><!-- einde caption-text --> 
     </div><!-- einde caption --> 
     </li>

我希望这帮助

来源

2014-04-02 10:10:04 Syranhil

元素定位html css

回答

相关问题