带你走进CSS定位详解

时间:2023-02-12 07:29:59

带你走进CSS定位详解

学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案。

一:定位

定位属性列表

  • position
  • top
  • bottom
  • right
  • left
  • z-index

position

基本语法:

position:static | absolute | fixed | relative

语法介绍:

  1. static:默认值,无特殊定位。
  2. absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,right,top,bottom。
  3. fixed:生成绝对定位的元素。
  4. relative:生成相对定位的元素,可通过left,right,top,bottom属性设置相对于自身偏移位置。

代码:

div { position:relative; top:-4px }

bottom

基本特殊:定位元素

基本语法:bottom:auto | length

语法

  1. auto:默认值,无特殊定位。
  2. 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

  1. auto:默认值,无特殊定位。
  2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

代码:

div { position:relative; top:-3px; left:6px; }

top

基本语法:top:auto | length

  1. auto:默认值,无特殊定位。
  2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

代码:

div { position:relative; top:-3px; left:5px;}

right

基本语法:right:auto | length

  1. auto:默认值,无特殊定位。
  2. 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定位详解

带你走进CSS定位详解的更多相关文章

  1. UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)

    Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...

  2. CSS 定位详解

    CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position position 属性的作用 position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即posi ...

  3. HTML&plus;CSS:css定位详解之相对定位、绝对定位和固定定位

    相对定位 如果想为元素设置层模型中的相对定位,需要设置position:relative;,它还是会占用该元素在文档中初始的页面空间,通过left.right.top.bottom属性确定元素在正常文 ...

  4. 多测师讲解自动化测试 &lowbar;RF课堂&lowbar;定位详解(002上午)&lowbar;高级讲师肖sir

    1,打开克览器 2.id定位 Input Text id=kw 我是id定位 #id定位方法 3.name定位 Input Text name=wd 我是name定位方法 #我是name定位方法 4. ...

  5. CSS选择器详解(伪类) 转 http&colon;&sol;&sol;blog&period;csdn&period;net&sol;Panda&lowbar;m&sol;article&sol;details&sol;50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  6. selenium:css&lowbar;selector定位详解

    selenium:css_selector定位详解(css selector和xpath的比较) 来源:https://www.cnblogs.com/haifeima/p/10138154.html ...

  7. 小甲鱼PE详解之基址重定位详解(PE详解10)

    今天有一个朋友发短消息问我说“老师,为什么PE的格式要讲的这么这么细,这可不是一般的系哦”.其实之所以将PE结构放在解密系列继基础篇之后讲并且尽可能细致的讲,不是因为小甲鱼没事找事做,主要原因是因为P ...

  8. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  9. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

随机推荐

  1. Awvs如何扫描需要登录的部分

    一个小技巧,可能部分的人习惯了按下一步.所以不大知道.给大家说说哈. 到LOGIN步骤的时候,在Login sequen 新建.然后你懂的了.会新出来一个浏览器,直接登录后一直下一步即可

  2. mysql 存储过程项目小结

    1. false :0  true 1 切记 官方文档:http://dev.mysql.com/doc/refman/5.0/en/numeric-type-overview.html BOOL,  ...

  3. Javascript parseFloat、parseDouble类型转换,数值加减,四舍五入

    <script language="JavaScript">var a = "0.11";var b = "0.2801";va ...

  4. Confluence 6 查看系统属性

    当你添加了内存,设置了代理(proxy)或者修改了 Java 的选项,通常比较难判断系统是否已经按照你的修改进行了配置和启动.这个页面将会帮助你查看 Confluence 站点运行使用的系统属性. 你 ...

  5. 关于报错:There is already &&num;39&semi;xxxController&&num;39&semi; bean method的解决方法

    报这个错的原因是因为你controller里的@RequestMapping中的路径有重复! 如:

  6. h5屏幕旋转的时间和样式的设置

    好几天没更新博客了,今天写写小感悟和一个小东西吧! 随着前端的前端的越来越火,对前端的要求也越来越高,从之前的切图到开发网站再到现在移动端开发,微信开发,手机app混合开发,不得不说现在前端在开发行业 ...

  7. Kalman滤波器从原理到实现

    Kalman滤波器的历史渊源 We are like dwarfs on the shoulders of giants, by whose grace we see farther than the ...

  8. gamit安装

    需要准备的文件: 默认已安装好虚拟机和Ubuntu系统 1.输入用户名密码,进入Ubuntu10.04桌面.按下“Ctrl+Alt+T”,进入终端: 2.在终端输入“sudo gedit /etc/a ...

  9. hdu 1561 树形dp&plus;分组背包

    题意:就是给定n个点,每个地点有value[i]的宝物,而且有的宝物必须是另一个宝物取了才能取,问取m个点可以获得的最多宝物价值. 一个子节点就可以返回m个状态,每个状态表示容量为j(j<=m) ...

  10. 【BZOJ2253】&lbrack;2010 Beijing wc&rsqb;纸箱堆叠 cdq分治

    [BZOJ2253][2010 Beijing wc]纸箱堆叠 Description P 工厂是一个生产纸箱的工厂.纸箱生产线在人工输入三个参数 n p a , , 之后,即可自动化生产三边边长为 ...