多个DIV重叠定位有关问题-HTML教程-爱易网页

多个DIV重叠定位有关问题

日期：2014-05-17　浏览次数：20688 次

多个DIV重叠定位问题
需实现的效果

思路：
1、白色区域为一个主DIV；
2、11111、2222、xxxx这些用列表li来做；
3、红色引线取一个DIV的border-left和border-top；
现在的问题就是每条引线定位的问题，前提每条引线都要以主DIV为基准，即主DIV移动时，引线也跟着移动。
以下是部分代码：还请各位多提提意见。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

.cp{margin: 0px; padding: 0px; width:1250px; font:25px "黑体", Arial}

.cp ul li{ list-style-type:none; padding:5px 0px;}

#l1{ padding-left:150px;}

#l10{ position:relative; width:135px; height:110px; border-left:1px solid #C06; border-top:1px solid #C06; left:50px; top:115px; z-index:2;}

#l2{ padding-left:250px;}

#l3{ padding-left:350px;}

#l4{ font-size:35px; font-weight:bold; color:#0237FD;}

#l5{ padding-left:150px;}

#l6{ padding-left:110px;}

#l7{ padding-left:60px;}

#l8{ padding-left:30px;}

</style>

</head>



<body>

<div class="cp">

<div id="l10"></div>

    <div style="position:relative; z-index:1; top:-40px;">

	<ul>

    	<li id="l1">111111111111</li>

        <li id="l2">222222222222</li>

        <li id="l3">333333333333</li>

        <li id="l4">X&nbsp;&nbsp;X&nbsp;&nbsp;XXXXX&nbsp;&nbsp;X&nbsp;&nbsp;X&nbsp;&nbsp;X&nbsp;&nbsp;XX</li>

        <li id="l5">555555555555</li>

        <li id="l6">666666666666</li>

        <li id="l7">777777777777</li>

        <li id="l8">888888888888</li>

    </ul>

	</div>

</div>

</body>

</html>

定位

------解决方案--------------------
容器position：relative，引线position：absolute定位就行了，这样引线就不占用位置，好调整

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

.cp{margin: 0px; padding: 0px; width:1250px; font:25px "黑体", Arial;position:relative}

.cp ul li{ list-style-type:none; padding:5px 0px;}

#l1{ padding-left:150px;}

.line{position:absolute;border-left:1px solid #C06; border-top:1px solid #C06; z-index:2;}

#l10{ width:135px;&n

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

多个DIV重叠定位有关问题

相关资料更多>

推荐阅读更多>