为什么我的div无法响应底部和左边

Question

我在另一个div里面有一个div。我希望它放置在红色框的左下角，但它不响应：bottom:0; left:0;。

这是绿色的盒子。

JSFiddle

编辑： 我如此无视。

Answer 1

.portfoliotekst { 
    padding-top:1px; 
    top:0; 
    width:300px; 
    height: 340px; 
    background-color:red; 
    position:relative; /* add this to specify its position */ 
} 
.viewwebsite { 
    text-align:center; 
    bottom:0; 
    left:0; 
    margin-top:50px; 
    line-height:56px; 
    width:200px; 
    background-color:#81b63a; 
    position:relative; 
    font-size:14pt; 
    position:absolute; /* add this to specify its position wrt its parent */ 
} 

Demo

Answer 2

.portfolioitem{ 
 
\t margin-top:11px; 
 
\t width:100%; 
 
    height:auto; 
 
    border-bottom:5px solid #000; 
 
} 
 

 
.borderbottom{ 
 
\t margin-top:20px; 
 
\t border-bottom: 3px solid #8cc63f; 
 
} 
 

 
.portfolioimg{ display:inline-block; } 
 

 
.portfolioitem img{ 
 
\t display:block; 
 
\t height:340px; 
 
\t width:331px; 
 
} 
 
.portfolioinfo{ 
 
\t display:inline-block; 
 
    background-color:yellow; 
 
\t height:340px; 
 
    width:560px; 
 
} 
 
\t .portfoliotekst{ 
 
     padding-top:1px; 
 
\t \t top:0; 
 
     width:300px; 
 
    height: 340px; 
 
    background-color:red; 
 
     position : relative; 
 
} 
 
\t .viewwebsite{ 
 
\t \t text-align:center; 
 
\t \t bottom:0; 
 
\t \t left:0; 
 
     margin-top:50px; 
 
\t \t line-height:56px; 
 
\t \t width:200px; 
 
\t \t background-color:#81b63a; 
 
\t \t position:absolute; 
 
\t \t font-size:14pt; 
 
\t } 
 

 
\t #page-main .viewwebsite a{ 
 
\t \t color:#fff !important; 
 
\t \t text-decoration:none; 
 
\t } 
 

 
.centertekst{ margin:0 auto; } 
 
.topmargin { margin-top:40px; } 
 
.left{ float: left; } 
 
.right{ float: right; }

<h2 class="borderbottom">MET Heerhugowaard</h2> 
 
<div class="portfolioitem"> 
 
\t <div class="portfolioimg left"> 
 
\t \t <img src="/images/methhw.png" height="680" width="663"/> 
 
\t </div> 
 
\t <div class="portfolioinfo"> 
 
\t \t <div class="portfoliotekst centertekst"> 
 
\t \t \t <h2>Beschrijving</h2> 
 
\t \t \t Insert beschrijving here 
 
\t \t \t 
 
\t \t \t <h2>Technieken</h2> 
 
\t \t \t Insert Technieken here 
 
      <div class="viewwebsite"> 
 
       <a href="">Bekijk de website</a> 
 
      </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

记住，当你需要做同样的事情：

• 集装箱是一个与relative断定离子
• 所含是一个与absolute位置

有乐趣CSS！