CSS布局与定位——Positioning(定位)四种定位方式要点总结
来源:互联网 发布:网络哈皮是什么意思 编辑:程序博客网 时间:2024/05/21 08:35
CSS定位方式为网页布局要点,而Positioning(定位)四种属性为掌握布局的基础。
1、Static 定位 (即静态定位)
要点:
html元素默认定位方式;
在正常的文档流中,占据空间;
top/bottom/right/left属性对其无效;
z-index层叠属性对其无效;
absolute定位元素不受其影响;
2、Relative 定位 (即相对定位)
要点:
相对其默认(static)位置定位;在正常的文档流中,占据空间,位置改变后原本所占空间不变;top/bottom/right/left属性有效;
z-index层叠属性对其有效;
absolute定位元素受其影响;
常用于absolute定位元素的容器;
3、Absolute 定位 (即绝对定位)
要点:
相对其已定位(ralative/absolute/fixed)父元素进行定位;若无已定位父元素,则以body元素为父元素定位;不在正常的文档流中,不影响正常流中元素位置;top/bottom/right/left属性有效;
z-index层叠属性对其有效;
absolute定位元素受其影响;
top/bottom/right/left计算的定位起点默认为父元素盒模型外边界,按从左向右,从上往下次序排列。
4、Fixed 定位(即固定定位)
要点:
相对显示器窗口进行定位,窗口滚动也不影响其位置;不在正常的文档流中,不影响正常流中元素位置;top/bottom/right/left属性有效;
z-index层叠属性对其有效;
absolute定位元素受其影响;
阅读全文
0 0
- CSS布局与定位——Positioning(定位)四种定位方式要点总结
- CSS 定位 (Positioning)
- CSS 定位 (Positioning)
- CSS 定位 (Positioning)
- CSS 定位 (Positioning)浅析
- CSS 定位 (Positioning)
- css定位(positioning)
- CSS 定位 (Positioning)
- CSS 定位 (Positioning)浅析
- 10022---CSS Positioning(定位)
- CSS 定位(Positioning)
- CSS-Positioning(定位)
- CSS Positioning(定位)
- CSS Positioning(定位)
- CSS-Positioning(定位)
- CSS Positioning(定位)与Float(浮动)
- css 四种定位方式
- css布局与定位
- Maven的下载与安装
- MySQL解压包安装及配置
- 剑指Offer-10
- 关于HTML5 data-*属性的几个坑
- MathType 技巧
- CSS布局与定位——Positioning(定位)四种定位方式要点总结
- Fence
- java图形验证码生成工具类
- template多行编写的方式
- centos7 下安装Apache
- Git如何把本地代码推送到远程仓库
- QT自定义界面纯QSS
- LeetCode 28. Implement strStr()
- 图书管理系统(ssh2)