510,position的值,relative和absolute定位原点是
(absolute:生成绝对定位的元素)
position属性用来规定元素的定位类型和方式
①position:static 默认值,没有定位,元素出现在正常的流中;
②position:fixed 固定定位 是相对于浏览器窗口来进行定位;
③position:relative 相对定位 相对于其本身正常位置来进行定位,它原本所占的空间仍保留;
④position:absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位(往上寻找参照元素,一直到根元素为止,即body),此时元素原先在正常文档流中所占的空间会关闭,就像元素原来不存在一样,绝对定位后会生成一个块级框,而不管它原先在正常流中是何种类型。
选好定位方式后可通过设置 top/right/bottom/left 来设置元素位置,但是对static无用,static定位下是靠margin来移动位置。
注意:当元素设置position:absolute后,再想用 margin:0px auto; 来使元素水平居中是无效的,可进行如下设置:
<style>
.s1{width:100%;height:100%;position:relative;}
.s2{background:yellow;width:300px;height:100px;position:absolute;
left:50%;margin-left:-150px;//是让元素到其相对定位的父元素左边
的距离为该父元素宽度的50%,这时左边边界正好在父元素的中间线上,再左移宽度的一
半正好居中,即再设置margin-top:-150px可使其水平居中
top:50%;margin-top:-50px;//与上述原理相同,设置后可垂直居中}
</style>
<body>
<div class="s1">
<div class="s2">
水平居中
</div>
</div>
</body>
510,position的值,relative和absolute定位原点是的更多相关文章
- 列出display的值,说明他们的作用。position的值, relative和 absolute定位原点是?
display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...
- CSS的position属性:relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...
- relative 和 absolute 定位关系
问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative 相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- 一张图看懂css的position里的relative和absolute的区别
position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, b ...
- CSS里Postion几个取值relative、absolute、static、fixed的区别和用法
---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...
- 自制简单表单验证relative与absolute定位
html结构,用到了label与span <label class="relative"><input type="text" name=&q ...
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
- 前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
随机推荐
- Java 11 新垃圾回收器 ZGC
可伸缩.低延迟的垃圾回收器 GC 暂停时间不超过 10ms 堆管理容量范围(小M级别,大到T级别) 对应用吞吐量影响不超过15%(对比 G1) 为进一步的添加新特性和优化做基础 默认支持 Linux/ ...
- 全排列(dfs-有重复数字)
给出一个字符串S(可能有重复的字符),按照字典序从小到大,输出S包括的字符组成的所有排列.例如:S = "1312", 输出为: 1123 1132 1213 1231 131 ...
- 巨杉内核笔记 | 会话(Session)
SequoiaDB 巨杉数据库是一款金融级分布式关系型数据库,坚持从零开始打造分布式开源数据库引擎.“内核笔记系列”旨在分享交流 SequoiaDB 巨杉数据库引擎的设计思路和代码解析,帮助社区用户深 ...
- JDK8-》 ⽅法引⽤与构造函数引⽤
以前⽅法调⽤ 对象.⽅法名 或者 类名.⽅法名 jdk1.8提供了另外⼀种调⽤⽅式 :: 说明:⽅法引⽤是⼀种更简洁易懂的lambda表达式,操作符是双冒号::,⽤来直接访问类或者实例 已经存在的 ...
- CodeForces 1141A
https://vjudge.net/problem/CodeForces-1141A #include <bits/stdc++.h> using namespace std; int ...
- 牛客多校第七场H Pair 数位dp理解
Pair 题意 给出A B C,问x取值[1,A]和y取值[1,B]存在多少组pair<x,y>满足以下最小一种条件,\(x \& y >c\),\(x\) xor \(y& ...
- [CF1220C] Substring Game in the Lesson - 博弈论
[CF1220C] Description 给定一个字符串 \(S\) , 同时维护一个区间 \([l,r]\) .轮流操作,每次可以扩展到一个新区间使得原区间是新区间的真子区间,并且字典序更小,不能 ...
- Oracle允许IP访问配置
http://www.linuxidc.com/Linux/2014-10/108650.htm 1.oracle服务器下/opt/app/oracle/product/11.2.0/network/ ...
- 2019杭电多校 permutation2
Problem:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1007&cid=852 #include<bits ...
- Dapper简介
Dapper文档 一,介绍:Dapper是一款轻量级ORM工具.如果你在小的项目中,使用Entity Framework.NHibernate 来处理大数据访问及关系映射,未免有点杀鸡用牛刀.你又觉得 ...