关于position定位,该怎么处理
日期：2014-05-16 浏览次数：20710 次
关于position定位
如上图的 大V
html结构
<div style="position:relative">
<div style="position:absolute; top:-50px; left:0;">
<img src="head.png"/>
<span>V</span> <!--大V如何定位在最下方，父节点div已经使用了position:absolute。。。-->
</div>
</div>
大V如何定位，父节点div已经使用了position:absolute，或者有更加简易的代码
------解决方案--------------------
绝对定位是相对于定位父级的，所以，只要你确定了他相对的父级，那么就好处理
如上图的 大V
html结构
<div style="position:relative">
<div style="position:absolute; top:-50px; left:0;">
<img src="head.png"/>
<span>V</span> <!--大V如何定位在最下方，父节点div已经使用了position:absolute。。。-->
</div>
</div>
大V如何定位，父节点div已经使用了position:absolute，或者有更加简易的代码
------解决方案--------------------
绝对定位是相对于定位父级的，所以，只要你确定了他相对的父级，那么就好处理
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.box{position:relative; border: solid 1px #ccc; height:300px; width:200px;margin:100px auto;}
.sub{ position:absolute;top:-50px;}
.sub img{width:200px;height:200px;}
.sub span{ position:absolute;right:0;bottom:0; border-radius:20px 20px; border:solid 2px #FF0;color:#FF3; padding:0 5px;}
</style>
</head>
<body>
<div class="box">
<div class="sub">
<img src="http://img0.bdstatic.com/img/image/mingxingliminhao.jpg"/>
<span>V</span> <!--大V如何定位在最下方，父节点div已经使用了position:absolute。。。-->
</div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
