css中多层块状元素叠加怎样将特定的块居于最上

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中多层块状元素叠加怎样将特定的块居于最上相关的知识,希望对你有一定的参考价值。

参考技术A 多层块状元素叠加,那你肯定是用了定位(positiong),这个样式默认有个z-index样式属性,这个属性越大,那么他的层级优先就越高(即显示的越上面,反之数值越小则显示越下面) 参考技术B

根据你的意思来说其实就是脱离文档流,实现的方法有多种

    用简单的浮动解决(要记得清除浮动)

    用定位解决,相对定位与绝对定位配合使用

    用 position:fixed(这个也属于定位,多用于置顶导航)

参考技术C z-index:12000;

       (这个数字是越大越好);

html+css--水平居中总结(不定宽块状元素方法)

来源:http://www.imooc.com/code/6363

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素:块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):

  1. 加入 table 标签
  2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
  3. 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

这一小节我们来讲一下第一种方法:

为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

举例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
    margin:0 auto;
}

/*下面是任务区代码*/
.wrap{
    background:#ccc;
    display:table;    //让第二个div变成table
    margin:0 auto;    //居中显示
}
</style>
</head>

<body>
<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

<div class="wrap">
  设置我所在的div容器水平居中  
</div>
</body>
</html>

上面代码做到的结果是让第二个div元素居中,而不是里面的文本居中。

 

以上是关于css中多层块状元素叠加怎样将特定的块居于最上的主要内容,如果未能解决你的问题,请参考以下文章

前端基础

如何用CSS让文字居于div的底部

如何用CSS让文字居于div的底部

在 CSS 悬停效果上,无法选择/应用效果到特定元素?

css元素类型详解

在css中 父元素不固定高度,怎样实现子元素的高度100