分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

css中position用法

发布时间:2023-09-06 01:39责任编辑:董明明关键词:暂无标签

HTML中的三种布局方式:标准流、浮动、定位

两大元素:

块级元素:div、table、H1~H6、有序无序列表(ol、ul、li)、p段落等

内联元素:a、span、img、input等
块级元素单独占一行,内联元素会从左到右依次排列在一行。

常用的定位position可分为以下四种:

  static: 元素的定位默认值。元素出现在正常的文档流中。top, left, right, bottom,z-index声明无效,言意上对于static的元素是没有任何效果。

  relative: 相对定位。通过top, left, right, bottom相对于其正常位置(标准流中的位置)进行定位。定位为relative的元素出现在正常的文本流中,即其在文本流中的位置依然存在。

  absolute: 绝对定位。相对于除static定位以外(即relative, absolute, fixed)的第一个父元素进行定位。可通过top, left, right, bottom进行定位,而其层叠通过z-index属性定义。定位absolute的元素脱离在正常文本流,但与relative的区别在于其在文本流中的位置不存在。

  fixed: 绝对定位,相对于浏览器窗口进行定位,可通过top, left, right, bottom进行定位,不受制于父元素。

relative与absolute的主要区别:

relative定位的层总是相对于其最近的父元素,无论父元素采用什么定位方式。

absolute定位的层总是相对于最近的除了static定位的父层元素进行定位。如果最近的父元素层中没有绝对或者相对定位,则将其相对于body进行定位。

css中position用法

原文地址:https://www.cnblogs.com/wangzhaofang/p/8361427.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved