网站布局中的三种定位级

第1种定位级:块对象默认定位级

此定位级特点:块对象默认情况下跟据其出现顺序上下安排布局

下图中是用块对象默认定位级排列的一个大容器包着三个小容器:

第2种定位级:块对象浮动定位级

此定位级特点:高于第1种定位级(此级别的对象会压在第1种定位级别对象上面),此定位级中块对象可横向摆放。

下图中是用块对象浮动定位级排列的一个大容器包着三个小容器。

第3种定位级:绝对定位级

此定位级特点:高于第2种定位级(此级别的对象会压在其他定位级别对象上面),此定位级中的对象就像是photoshop里的图层。是用独立坐标来定位的。 下图中是用绝对定位级的显示效果

案例分析:

第一部分:给块对象加float属性让其升级为浮动定位级

默认情况下div都是第1种定位级——块对象默认定位级

如下图:

当我们给红色的子级设置float属性后,它便升级了!如果我们把绿色子级的高改变大些,可以看得出来红色现在是压在绿色上面的。

看下图:

用同样的办法,我们给绿色和蓝色的子级都加float属性,他们就都跟红色的子级一样升级到了第2种定位级——块对象浮动定位级。

看下图:

第二部分:加position:absolute升级为绝对定位级

我们如果想要让我们的标签对象升级进入到第3种定位级——绝对定位级,只需要给其加上position:absolute属性。进入绝对定位级后的标签会压在其他定位级标签上面。 看下图:

网站布局技术是一个很简单的技术,因为始终在用这三种定位关系来安排布局。希望这个简单的说明对你在学习网站布局方法能有所帮助。

原文发布于微信公众号 - 我分享我快乐(duan_uid)

原文发表时间:2014-04-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 选项卡 顶

注意:为了获得高质量的用户体验,选项卡条的用户必须将焦点设置为新显示的内容,以便1)选项卡不保留焦点样式,2)屏幕阅读器可以计算已更改的内容。

12920
来自专栏前端知识分享

第147天:web前端开发中的各种居中总结

方法① :行内元素 (父元素)text-align,(子元素)inline-block

12640
来自专栏三十课

【基础】CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案...

49050
来自专栏小蠢驴iOS专题

MBProgressHUD && SVProgressHUD 在实际开发中运用

39660
来自专栏CRPER折腾记

Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件

返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了

9810
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native之React速学教程(上)

React Native之React速学教程(上) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

29080
来自专栏Java后端技术

HTML标记语法总结

         语法:<标记名>…标记内容…</标记名>,如:<a>这是百度的主页</a>

21720
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

11610
来自专栏落花落雨不落叶

js简单实现div宽度匀速增加/减小

30570
来自专栏淡定的博客

markdown基础语法

8020

扫码关注云+社区

领取腾讯云代金券