为什么我的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{
	margin-top:11px;
	width:100%;
    height:auto;
    border-bottom:5px solid #000;
}

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

.portfolioimg{ display:inline-block; }

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

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

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

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

请记住，当您需要做类似的事情时：

• 容器是relative位置
的容器
• 包含是absolute位置
的那个

享受CSS的乐趣！