HTML中的布局,一个比较难以理解的概念,就是position了,W3C上的解释,position有如下几种:

1. static,默认值,也就是在样式中不指定position

2. fixed

3. absolute

4. relative

其中,static,fixed的相对好理解点,比较难一点的是absolute及relative。 我个人的理解,这里的position,都是要找一个参照层再来说位置的布局。没有参照层,布局其实就没有什么意义,至少生产环境下是这样子的,因为你放置一个HTML元素的时候,一定在设计的时候是有一个期望的,那就是你希望这个元素放在父层中的什么位置。也就是说你不会瞎放,若是想瞎放,那就不在这个话题范围内了!

其实,这个要是有切身的体会,还是不那么难理解的,若没有实际操作过,估计是比较难以搞明白。尤其absolute和relative。 还有,这position中,static下,top,left,bottom, right等属性将无效。 relative和absolute,通常要和top/left/bottom/right一起使用,他们也往往与margin一起实现布局中的位置调整。

理解上的东西,最好来个例子,会有助于接受概念上的东西。 下面的例子,是用来做web页面模块拖拽设计的一部分。需要的可以参考。

 <style type="text/css">
#sub1,#sub2,#sub3{
position : relative;
height: 50px;
margin: 10px; }
#sub1p{
border: 1px solid blue;
margin: 20px;
position:;
top: 50px;
left: 50px;
right: 50px;
} #parentLeft{
border: 1px solid gray;
width: 34%;
position: relative;
float: left;
height:100%
}
#parentRight{
border: 1px solid gray;
width: 64%;
position: relative;
float: right;
height: 100%;
z-index: 1;
}
.ptop{
position: absolute;
width: 100%;
top: 0px;
height: 2px;
border: 1px solid green;
cursor: n-resize;
z-index: 1;
}
.pleft{
position: absolute;
width: 2px;
top: 0px;
left: 0px;
height: 100%;
border: 1px solid green;
cursor: e-resize;
z-index: 1;
}
.pright{
position: absolute;
width: 2px;
top: 0px;
right: -2px;
height: 100%;
border: 1px solid green;
cursor: e-resize;
z-index: 1;
}
.pbottom{
position: absolute;
width: 100%;
left: 0px;
bottom: -2px;
height: 2px;
border: 1px solid green;
cursor: n-resize;
z-index: 1;
}
.pboth{
position: absolute;
width: 10px;
right: -0px;
bottom: -0px;
height: 10px;
border: 2px solid pink;
cursor: nw-resize;
z-index: 2;
}
</style>
<div id="parentLeft">
<div id="sub1p">sub1p
<div id="sub1" style="border: 1px solid red;">
<div class="ptop"></div>
<div class="pleft"></div>
<div class="pright"></div>
<div class="pbottom"></div>
<div class="pboth"></div>
sub1
</div>
<div id="sub2" style="border: 1px solid red;">
<div class="ptop"></div>
<div class="pleft"></div>
<div class="pright"></div>
<div class="pbottom"></div>
<div class="pboth"></div>
sub2
</div>
<div id="sub3" style="border: 1px solid red;">
<div class="ptop"></div>
<div class="pleft"></div>
<div class="pright"></div>
<div class="pbottom"></div>
<div class="pboth"></div>
sub3
</div>
</div>
</div>
<div id="parentRight"> </div>
<script src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var divs = $("div");
$.each(divs, function(i, div){
$(this).click(function(){
alert(this.id + ", " + $(this).css("position"));
});
});
});
</script>

这里,读者自己细心体会吧,例子中除了fixed没有用到,其他几个都有。fixed相对简单,使用的场景相对也简单,比如页面导航,或者页脚等。 例子中的position,感兴趣的话,可以修改一下试试,找点感觉,这样会对理解有帮助。

HTML之布局position理解的更多相关文章

  1. c++对象内存布局的理解

    我对c++对象内存布局的理解   引言 结合网上的一些资料,通过自己的一番摸索,得出了一点个人见解.现在写下来,希望与各位同学共同探讨,共同进步. 以下所有代码均是在VS2012下测试. 一个普通的基 ...

  2. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  3. 布局 position

    position : 设置定位方式 跟『定位』相关的有一些属性,最重要的一个是『position』,它主要是设置『定位方式』. 而定位方式最重要的是设置『参照物』. 配合 position 使用的有这 ...

  4. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  5. Web开发中常用的定位布局position

    定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美. position是CSS中非常重要的一个属性,通过position属性,我们可以让元素 ...

  6. 定位布局—position

    1. position的属性 1.1position:static 默认位置,没有定位效果 1.2 position:relative 相对定位,不会脱离文档流,相对于原来位置的变化 <!DOC ...

  7. 我对c++对象内存布局的理解

    引言 结合网上的一些资料,通过自己的一番摸索,得出了一点个人见解.现在写下来,希望与各位同学共同探讨,共同进步. 以下所有代码均是在VS2012下测试. 一个普通的基类 1: #include < ...

  8. 左侧固定,右侧自适应的布局方式理解margin负值理论

    一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...

  9. CSS 对于grid布局的理解,举例代码及解释

    网格布局介绍: CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式.CSS 一直用来布局我们的网页,但一 ...

随机推荐

  1. 六、CCLayer

    一个游戏中可以有很多个场景,每个场景里面又可能包含有多个图层,这里的图层一般就是CCLayer对象.CCLayer本身几乎没什么功能,对比CCNode,CCLayer可用于接收触摸和加速计输入.其实, ...

  2. Spark延长SparkContext初始化时间

    有些应用中可能希望先在driver上运行一段java单机程序,然后再初始化SparkContext用集群模式操作java程序返回值.从而避免过早建立SparkContext对象分配集群资源,使资源长时 ...

  3. MAC OSX使用公钥方式登录Linux服务器并进行安全加固

    登录Linux服务器的方式一般是使用ssh,直接使用密码登录既要记忆密码在输入过程中又有安全风险.所以本文将提供一个使用公钥登录的方式来解决输入密码的问题. 首先在mac上生成一个私钥.公钥对 首先, ...

  4. ZOJ 3804--解题报告

    题目相关: 3804相关链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5336 宠物(minion)在N*M的矩形玩游戏 ...

  5. H-ui小技巧

    图片上传时修改错误提示信息(图超过允许上传的图片的数量):在webuploader.js中修改

  6. Python Tornado

    按照http://www.tornadoweb.cn/所提供的方法下载安装后编写如下程序: import tornado.ioloop import tornado.web class MainHan ...

  7. 打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。

    [错误] 打开eclipse报错:发现了以元素 ‘d:skin’ 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\Android-sdks\system-im ...

  8. apache性能优化

    perfork进程数 http://sookk8.blog.51cto.com/455855/275759/ mod_cache 磁盘缓存 http://www.cnblogs.com/fnng/ar ...

  9. QMessageBox类学习:

    先来看一下最熟悉的QMessageBox::information.我们在以前的代码中这样使用过:   QMessageBox::information(NULL, "Title" ...

  10. Valgrind使用[转]

    简介 调试程序有很多方法,例如向屏幕上打印消息,使用调试器,或者只需仔细考虑程序如何运行,并对问题进行有根有据的猜测. 在修复 bug 之前,首先要确定在源程序中的位置.例如,当一个程序产生崩溃或生成 ...