css如何把一个小div放在图片上的某个区域

html-css056

css如何把一个小div放在图片上的某个区域,第1张

需要两个div。大div包含图片,小div和图片一块儿放在大div里,然后对小div加CSS,position:relative后用top,bottom,right和left来固定位置。relative是根据父级元素定位的。

照你这种布局方式,

要么就是把#div_left_bottom{

background-color:#66CC66

width:100%

position:relative

top:300px

}

这个top值改小,但是这样弄的话,上面几个模块如果内容增加div高度变高的话,那么就会被这个层挡住,给你一个建议,绝对定位和相对定位不要随便乱用,因为很容易把布局全都定死,不好修改;还有就是float值能不用就尽量别用,用的不熟的人比较容易出错

我给你把整体布局做一下修改,希望是你要的

<style type="text/css">

body{ margin:0padding:0}

#main{width:98%}

#div_left{

height:500px

background-color: #FF0000

border-right-color: #2A5CAEborder-right-width:2pxborder-right-style:solid

border-bottom-color: #2A5CAEborder-bottom-width:5pxborder-bottom-style:solid

}

#div_leftbox{

float:left

width:200px

}

#div_left_top{

background-color:#3300CC

height:300px

}

#div_left_bottom{

background-color:#66CC66

}

#div_right{

background-color:#00FF66

overflow:auto

margin-left:200px

}

</style>

</head>

<body>

<div id="main">

<div id="div_leftbox">

<div id="div_left">

<div id="div_left_top" style="vertical-align:bottom ">b</div>

</div>

<div id="div_left_bottom" >c</div>

</div>

<div id="div_right">d</div>

</div>

</body>