css定位属性的运用
position 定位
定位:主要解决叠加排列的问题。
position
1.static(默认)
2.relative : 相对定位
如果没有定位偏移量,对元素本身没有任何影响(一般用于需要加定位的父容器,既给了子元素定位的祖先元素,有对元素本身没有影响)
不使元素脱离文档流,空间是会被保留。
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
3.absolute : 绝对定位
使元素完全脱离文档流
使内联元素支持宽高 (让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
注:如果祖先元素中有多个元素具备定位模式,那么是已离自己最近的祖先元素进行偏移。
4.fixed : 固定定位
相对于整个浏览器窗口进行偏移,在浏览网页的时候会固定在屏幕的某个位置,不受浏览器滚动条的影响(主要作用)
使元素完全脱离文档流
使内联元素支持宽高 (让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
不会受到祖先元素的影响。
5.sticky : 黏性定位
在没有到达指定位置的时候,是没有定位效果的,到达了指定位置,就变成了固定模式。
定位偏移量 : left top right bottom , 不能单独使用,必须得配合定位模式。(一般用法是给父容器加相对定位,但不加定位偏移量。)
6.z-index: 定位层级
默认层级为0.(如果都不设置层级,后写的层级高,但比较的时候还是0。)
比较的时候,会先跟同级别的先比较。(比较的时候,必须有定位模式和z-index)
css定位属性的运用的更多相关文章
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性)
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
- CSS - 定位属性position使用详解(static、relative、fixed、absolute)
position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...
- CSS定位属性
定位属性 position属性 1. s ...
- css 定位属性position的使用方法实例-----一个层叠窗口
运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...
- 关于CSS定位属性 position 的使用
CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位, ...
- CSS定位属性position相关介绍
position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...
- 转:CSS定位属性详解
转载:https://juejin.im/post/5a1bb35ff265da43231ab164 这篇文章对css的绝对定位和相对定位有详细的解释
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
随机推荐
- Android开发之《USB Camera》
SimpleWebCam Source Code:https://bitbucket.org/neuralassembly/simplewebcam/src 1. USB摄像头UVC兼容(如今大部分兼 ...
- rancher1.6高可用集群搭建
rancher高可用集群搭建 一.搭建环境 1.安装系统 下载centos最新版, http://mirrors.sohu.com/centos/7/isos/x86_64/CentOS-7-x86_ ...
- java实现树的一般操作
https://www.cnblogs.com/dawnyxl/p/9047437.html 树是数据结构中最基本的结构,今天的博客更新一下树的基本操作: 树的节点结构: package tree; ...
- [洛谷P2613] [模板] 有理数取余
刷水题. 传送门 看似高精而非高精乃是此题最大亮点. 边读边取模技能get~ #include<cstdio> #define ll long long #define mod 19260 ...
- resin远程调试debug
wangqiaowqo Resin 远程debug Resin Windows下提升Resin默认的虚拟机内存大小 httpd.exe -Xmx1024m 参考外部文章 Resin远程debug配置文 ...
- Android编程权威指南第三版 第32章
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35564145/article/de ...
- GCD实现多个定时器,完美避过NSTimer的三大缺陷(RunLoop、Thread、Leaks)
定时器在我们每个人做的iOS项目里面必不可少,如登录页面倒计时.支付期限倒计时等等,一般来说使用NSTimer创建定时器: + (NSTimer *)timerWithTimeInterval:(NS ...
- Autowired和Resource区别
@Autowired和@Resource熟悉吧?是不是经常复制粘贴顺手就来,两者都是用来给成员变量自动装载,可是它俩到底有啥区别呢? 1.@Autowired与@Resource都可以用来装配bean ...
- 虚拟桌面软件CitrixReceiver相关问题
由于安过一次,卸载再次安装程序报错: 原因:卸载不干净,导致再次安装部分插件未成功安装 解决: 1.在控制面板卸载Citrix receiver 2.删除C:\Program Files (x86)\ ...
- HINOC2.0标准介绍(1):概述
本文首发于'瀚诺观察'微信公众号 摘要: 2016年3月18日,国家新闻出版广电总局批准发布了行业标准GY/T 297-2016<NGB宽带接入系统HINOC2.0物理层和媒体接入控制层技术规范 ...