怎样解决css相对定位元素的后面不重叠

html-css021

怎样解决css相对定位元素的后面不重叠,第1张

因为relative相对定位是相对原位置的移动,不占用偏移出来的位置.我自己用两个方法:

1.

给需要定位的套个大的div，div用margin来调整位置.

2.

后面的元素margin-top=相对定位的top来解决.

使用ul和li做表格我给你个案例。

<style>

body,ul{ margin:0padding:0}

ul,li{ list-style:none}

.wrap{ width:385px margin:30px auto}

.wrap ul{

border-top:1px solid #0000f0

border-right:1px solid #0000f0

}

.wrap ul li{

width:76px

height:39px

line-height:39px

text-align:center

float:left

border-left:1px solid #0000f0

border-bottom:1px solid #0000f0

overflow:hidden

}

</style>

</head>

<body>

<div class="wrap">

<ul>

<li>妙味</li>

<li>妙味</li>

<li>妙味</li>

<li>妙味</li>

<li>妙味</li>

</ul>

</div>