怎么消除css中的绝对定位重叠问题

2023-02-28 15:44:01html-css021

怎么消除css中的绝对定位重叠问题,第1张

首页打开dreamweaver或其它编辑器，创建一个名为nav的导航菜单

<ul>

</ul>

</div>

现在为nav添加样式,首先去掉默认的margin和padding，再去掉<ul><li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：

* { margin:0padding:0}

ul, li { list-style:none}

a { text-decoration:none}

.nav { border:2px solid #cccborder-right:noneoverflow:hiddenfloat:leftmargin:100px 0 0 300px}

.nav ul li { float:left}

.nav

ul li a

{ width:120pxheight:40pxtext-align:centerline-height:40pxdisplay:blockborder-right:2px

solid #cccbackground:#eeecolor:#666}

.nav ul li a:hover{ color:#f00}

</style>

像这样，一个菜单横向菜单就建好了，下面给栏目一，栏目二，栏目三，添加二级下拉菜单

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

添加完二级栏目后，现在开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签，如一下样式：

.nav ul li ul { position:absolute}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}

接下来隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：

.nav ul li ul { position:absolutedisplay:none}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}

.nav ul li:hover ul{ display:block}

至此，横向二级下拉菜单就制作完成了，这里附加上全部代码

具体解释见这里：http://www.w3school.com.cn/css/pr_class_position.asp

下面我从实际使用中说一下：

【static】定位模式用的不多，既然他的意思是没有定位，通常就不实用他。但css是层叠样式表，所谓层叠，意思就是哪个属性离当前html元素最近就执行那个属性。所以，同级选择器时css的行越往下权重越高。id比class的权重高。行内css权重大于页内css大于文件css。那么，如果起初定义过定位属性，后面又需要取消定位属性，在保证css结构的情况下，可以用这个属性来重置定位（取消起初定义的定位）。

【绝对定位absolute】绝对定位的意思是，不使用外边距和内边距修饰的定位。所以，你可以看到外边距是：margin-【left、right、top、bottom】，内边距是padding-【left、right、top、bottom】，而绝对定位只有【left、right、top、bottom】，所以就是绝对定位，绝对定位默认情况下是参照浏览器的窗口大小的。但，如果其父级元素有定位属性，则参照其父级元素的左上角。绝对定位会丢失元素自身的宽高值和原始位置，漂浮于其他层上方或下方。

【相对定位relative】相对定位是参照附近的元素进行定位，他可以使用内外边距，也可以使用绝对的方位值，和绝对定位不同的是，相对定位会保留元素自身的尺寸位置，而不浮动定位。

【关于绝对定位和相对定位】通常建议：

如果是全屏内容，可以直接使用绝对定位，如弹窗、浮动回到顶部、客服等

如果是希望固定区域内自由布局，则需要对父级指定相对定位属性（或者绝对定位属性）。

绝对定位的元素和其他元素出现了遮挡，可以为其他元素设置相对定位属性，同时设置z-index的值。

【固定定位fixed】fixed是把某个元素按照固定的位置呈现，它也是参照浏览器窗口的，和绝对定位差不多，但又不同，不同之处在于，他不随窗口的滚动移动位置。常用于固定导航条和回到顶部等模块中。

具体的，你可以写一个练习文件，中间放置一个960*960的div，设置下背景色，居中对齐，里面放置9个小div，设置宽度高度，外面放置4个div，也设置宽高。

中间的大div给予相对定位属性，里面的9个小div设置绝对定位，分别调整9个div为左上角、顶部居中、右上角、右侧垂直居中、右下角、底部居中、左下角、左侧垂直居中和绝对居中。

外部的四个div分别尝试使用绝对定位、相对定位和固定定位。

最后使用static重置一下。然后找一个游戏界面（自由零散布局），大致看下他的界面布局，理解下如何布局，然后看一些UI界面（自由规矩布局），理解下，最后回到网页（绝对规矩布局）。理解了这些，就可以用html当PS玩了。

float两个元素绝对靠紧，需要使用到margin和padding重置（有专门的css reset，来重置html元素的默认属性，html默认是有属性的，每个浏览器都不一样），重置后试试，实在不行尝试下使用 * {margin:0padding:0}（不建议使用）。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”