绝对定位right:0;无效

点击上方蓝字关注我们

CSS定位是基于盒子模型的，可分为静态static定位，绝对absolute定位，相对relative 定位，固定fixed定位。

盒子模型：

static：对象遵循正常文档流，top、right、bottom、left等属性无效。absolute：对象脱离正常文档流，使用left、right、top、bottom等属性进行定位，其层叠可通过css z-index属性定义，此时对象不具有margin边距，但仍有补白和边框border。absoulte定位虽然号称“绝对”，但是它的功能却更接近于“相对”一词，因为使用absoulte定位的元素脱离文档流后，就只能根据祖先类元素(父类及以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的直系祖先类元素，直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位，和元素相差9px左右。

relative：对象遵循正常文档流，相对于对象左上角位置(移动前)进行定位，移动后仍占据原空间，对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

span style="box-sizing: border-box;outline: 0px;overflow-wrap: break-word;">html>

<style>

html{border:1px dashed green;}

body{border:1px dashed yellow;}

#first{

width:200px;

height:200px;

border:1px solid red;

position: relative;

color:red;

}

#second{

width:200px;

height:200px;

color:blue;

border:1px solid blue;

position: absolute;

top:0;

left:0;

}

style>

<body>

<div id="first">relativediv>

<div id="second">absolutediv>

body>

html>

fixed：对象脱离正常文档流，使用top、right、bottom、left等属性以窗口左上角为参考点进行定位，当出现滚动条时，对象不会随着滚动，其层叠通过z-index属性定义。overflow：如果一个元素的大小固定，但其内容放不下，就会导致溢出，overflow控制溢出部分的可见visible、不可见hidden、滚动可见scroll、自动auto、继承inherit、默认值为visible。

文档流：将浏览器窗体内部自上而下分成一行行, 并在每行中按从左至右的顺序排放元素，即为文档流。

更多精彩请继续关注小编了解哦！

计算机毕业设计(源程序+论文+开题报告+文献综述+翻译+答辩稿)

联系QQ:2932963541进行咨询

网站地址：http://www.webtmall.com/扫码关注最新动态点击此处“阅读全文”查看更多内容

绝对定位right:0;无效_CSS定位详解相关推荐

定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解
本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...
关于android的4.2的0文件夹的详解
关于android的4.2的0文件夹的详解 ---- android 4.0 ---- 在galaxy nexus(GN)手机上userdata分区很大,被挂在/data目录,用户的数据通常是放在sd ...
mysql8.0.11 安装顺序_mysql 8.0.11 安装步骤详解
本文为大家分享了mysql 8.0.11 安装步骤,供大家参考,具体内容如下第一步:下载安装包 MYSQL官方下载地址:官方下载这里第一项是在线安装,第二项是离线包安装,我选择的是第二项(不用管你 ...
ASP.NET2.0 ObjectDataSource的使用详解
介绍ObjectDataSource的使用,按照dudu的建议为了节省篇幅,做成连接,这里仅提供前三篇,后面还有几篇以后再补充吧 ASP.NET2.0 ObjectDataSource的使用详解(1) ...
android ble蓝牙接收不到数据_Android蓝牙4.0 Ble读写数据详解 -2
Android蓝牙4.0 Ble读写数据详解 -2 上一篇说了如何扫描与链接蓝牙这篇文章讲讲与蓝牙的数据传输,与一些踩到的坑. 先介绍一款调试工具,专门调试Ble蓝牙的app.名字叫:nRF-Con ...
linux下安装mysql_Linux下安装mysql-8.0.20的教程详解
** Linux下安装mysql-8.0.20 ** 环境介绍操作系统:CentOS 7 mysql下载地址:https://dev.mysql.com/downloads/mysql/ 下载版本: ...
mysql压缩包安装教程8.0.19,win10安装zip版MySQL8.0.19的教程详解
win10安装zip版MySQL8.0.19的教程详解一. 下载后解压到想安装的目录二. 在安装目录中添加配置文件my.ini [mysqld] # 设置3306端口 port=3306 # 设置 ...

绝对定位right:0;无效_CSS定位详解

绝对定位right:0;无效_CSS定位详解相关推荐

最新文章

热门文章