带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案。
一:定位
定位属性列表
- position
- top
- bottom
- right
- left
- z-index
position
基本语法:
position:static | absolute | fixed | relative
语法介绍:
- static:默认值,无特殊定位。
- absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,right,top,bottom。
- fixed:生成绝对定位的元素。
- relative:生成相对定位的元素,可通过left,right,top,bottom属性设置相对于自身偏移位置。
代码:
div { position:relative; top:-4px }
bottom
基本特殊:定位元素
基本语法:bottom:auto | length
语法
- auto:默认值,无特殊定位。
- length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div { position:relative; bottom:6px; }
z-index
语法:z-index:auto | number
取值:auto:默认值,number:无单位的整数值,可负数。
代码:
div { position:absolute; z-index:5; width:6px; }
left
基本语法:left:auto | length
- auto:默认值,无特殊定位。
- length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div { position:relative; top:-3px; left:6px; }
top
基本语法:top:auto | length
- auto:默认值,无特殊定位。
- length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div { position:relative; top:-3px; left:5px;}
right
基本语法:right:auto | length
- auto:默认值,无特殊定位。
- length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。
代码:
div { position:relative; top:-3px; right:6px}
相对定位
relative生成相对定位的元素,相对于其它位置进行定位。
代码:
<style type="text/css">
#box1 {
margin: 10px;
width: 100px;
height: 100px;
background-color: blue;
}
#box2 {
margin: 10px;
width: 100px;
height:100px;
background-color: red;
/*position: relative;
left: 100px;
top: 100px;*/
}
</style>
<div id="box1"></div>
<div id="box2"></div>
绝对定位
绝对定位相对于它的参照物移动位置,如果没有,默认为body为参照物。
结语
- 带你走进CSS定位详解,多试试,熟能生巧嘛~
带你走进CSS定位详解的更多相关文章
- UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
- CSS 定位详解
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position position 属性的作用 position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即posi ...
- HTML+CSS:css定位详解之相对定位、绝对定位和固定定位
相对定位 如果想为元素设置层模型中的相对定位,需要设置position:relative;,它还是会占用该元素在文档中初始的页面空间,通过left.right.top.bottom属性确定元素在正常文 ...
- 多测师讲解自动化测试 _RF课堂_定位详解(002上午)_高级讲师肖sir
1,打开克览器 2.id定位 Input Text id=kw 我是id定位 #id定位方法 3.name定位 Input Text name=wd 我是name定位方法 #我是name定位方法 4. ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- selenium:css_selector定位详解
selenium:css_selector定位详解(css selector和xpath的比较) 来源:https://www.cnblogs.com/haifeima/p/10138154.html ...
- 小甲鱼PE详解之基址重定位详解(PE详解10)
今天有一个朋友发短消息问我说“老师,为什么PE的格式要讲的这么这么细,这可不是一般的系哦”.其实之所以将PE结构放在解密系列继基础篇之后讲并且尽可能细致的讲,不是因为小甲鱼没事找事做,主要原因是因为P ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
随机推荐
- K8s之配置文件kubeconfig生成
在开启了 TLS 的集群中,每当与集群交互的时候少不了的是身份认证,使用 kubeconfig(即证书) 和 token 两种认证方式是最简单也最通用的认证方式. 以kubectl为例介绍kubeco ...
- html语义化练习易牛课堂代码
html <body> <header> <!-- 导航 --> <nav> <a href=" ...
- git配置正确且权限已开但是pull或push提示无权限
因为之前提示输入用户名和密码时输入错误,之后就一直权限认证失败.这种情况下在git bash中输入: git config --system --unset credential.helper 就会重 ...
- Python类继承(转发)
目录 一.概述 二.类的继承 2.1 继承的定义 2.2 构造函数的继承 2.3 子类对父类方法的重写 三.类继承的事例 回到顶部 一.概述 面向对象编程 (OOP) 语言的一个主要功能就是“继承”. ...
- 394. Decode String 解码icc字符串3[i2[c]]
[抄题]: Given an encoded string, return it's decoded string. The encoding rule is: k[encoded_string], ...
- [leetcode]6. ZigZag Conversion字符串Z形排列
The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...
- [leetcode]24. Swap Nodes in Pairs交换节点对
Given a linked list, swap every two adjacent nodes and return its head. You may not modify the value ...
- 我的java学习之旅--一些基础
(因为我粗略学过C,C++,Python,了解过他们的一些语法,所以为了使得java的入门更为顺畅,便会忽略一些和C语法相类似的地方,着重点明一些java自己的特色之处.也减轻一下自己写文字的负担.) ...
- 20172325 2018-2019-2 《Java程序设计》第八周学习总结
20172325 2018-2019-2 <Java程序设计>第八周学习总结 教材学习内容总结 一.堆 1.什么是堆? 具有两个附加属性的一个二叉树. 堆分为小顶堆和大顶堆. 最小堆:对每 ...
- redis CentOS6.5安装及集群部署
.下载redis source包 链接:https://pan.baidu.com/s/122ZCjNvjl9Jx6M2YsLrncw 密码:92ze 2.解压 tar -xzf redis-3.2. ...