html中多个div嵌套时div在上一级中的相对位置的设置

您所在的位置:网站首页 div往下移 html中多个div嵌套时div在上一级中的相对位置的设置

html中多个div嵌套时div在上一级中的相对位置的设置

2024-03-17 02:15| 来源: 网络整理| 查看: 265

在利用div+css进行布局时,常常被div的位置弄的焦头烂额,其实只要了解了div的position属性就可以了

position的四种取值的四种取值的四种取值的四种取值 

static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定

 relative:relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。 absolute:absolute绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器,那就使用浏览器初始的,也就是body或者html元素。标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。

 fixed:fixed才是真正的绝对定位,其位置永远相对浏览器位置来计算。而且就算用户滚动页面,元素位置也能相对浏览器保持不变,也就是说永远可以看到,这个做一些彩单的时候可以用。可惜的是ie还不支持

在我做的两个div嵌套中主要目的是利用div来实现table的效果,应为不同的浏览器,如果设置为table的属性,在会出现不同的效果很难看,所以试着用div来实现,在第二个div中先指出了position:absolute;然后又指明了   margin-left:15px;   margin-top:8px;就可以了可以根据自己的需要将值的大小自己设置。

具体代码如下:

.search{     margin:0;     padding:0;     height :40px;     background-color:#03AD6E;    /* margin-left:auto;/*用于在不同浏览器中居中*/    /* margin-right:auto;/*配合上一句使用*/    }   #key{   background-color:#ffffff;   text-align:center;   position:absolute;   margin-left:15px;   margin-top:8px;   height:25px;   width:60px; }其中key嵌套在search中



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3