CSS绝对定位的应用
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<div class="box"> <div class="con"> <input class="input" id="input"> <a href="javascript:;" class="search"></a> </div>
<ul class="list" id="list"> <li class="in">选项一</li> <li class="in">选项二</li> <li class="in" style="margin-bottom: -1px">选项三</li>
index++; move(index); } } function move(index){ list.style.left = '-' + index*100 + '%'; } 复制代码
text-align: center; font: 40px/200px '宋体';
color: white; overflow: hidden; } .list{ position: absolute; width: 400%; left: 0; top: 0; bottom: 0; transition: left 1s; } .in{ float: left; width: 25%; background-color: lightgreen; } .l,.r{ position: absolute; opacity: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.1); cursor: pointer; } .l{ left: 0; right: 50%; } .r{ left: 50%; right: 0; } .l:hover,.r:hover{ opacity: 1; transition: 1s; } 复制代码 复制代码
应用
以下是基于绝对定位静态位置的应用
【1】自适应位置的跟随图标
图标使用不依赖定位父级的 absolute 和 margin 属性进行定位，这样，当文本的字符个数改 变时，图标的位置可以自适应
复制代码 div{
height: 20px; width: 500px; line-height: 20px; margin-bottom: 30px; } i{ position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/hot.gif'); } 复制代码 <div>长度可变文字<i></i></div>
【2】视频图片上的小图标提示
一般在视频图片上的边角上都会有"自制"、"最新"、"1080p"等诸如此类的提示。使用不依 赖的绝对定位属性，可以让父级元素不设置 relative，拓展性更强
复制代码 i{
position: absolute;
width:40px; text-align: center; height: 18px; line-height: 18px; font-style: normal; background-color: orange; color: white; padding: 2px; } .box{ height: 200px; width: 200px; border: 2px solid gray; } .in{ width: 100%; height: 100%; line-height: 100px; background-color: pink; display:inline-block; } .rt{ margin-left: -44px; } .lb{ margin-top: -22px; } .rb{ float: right; margin-top: -22px; margin-left: -44px; } 复制代码 复制代码 <div class="box"> <i class="lt">自制</i> <div class="in">测试内容</div><!---><i class="rt">独家</i> <i class="lb">1080p</i> <span style="width: 100%;display:inline-block"></span><!---><i class="rb">最新</i> </div> 复制代码
【3】下拉菜单
一般地，下拉菜单作为一个组件需要使用在各种场景中，如果给组件添加 relative 属性，则 降低了其利用率。
复制代码 body{
margin: 0; } ul{
margin: 0; padding: 0; list-style: none; } input{ padding: 0; border: 0; } .box{ width: 200px; height: 38px; border: 2px solid gray; } .con{ overflow: hidden; } .input{ float: left; width: 160px; height: 38px; } .search{ width: 38px; height: 38px; float: right; background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px; } .list{ display:none; position: absolute; width: 158px; border: 1px solid #e6e8e9; overflow: hidden; } .in{ line-height: 30px; border-bottom: 1px solid lightblue; cursor:pointer; text-indent: 1em; } .in:hover{ background-color: #f9f9f9; } 复制代码 复制代码
属性中的两个，且这两个属性不对立。但实际上，对立的偏移属性如 left 和 right 可以同时使用， 甚至 4 个偏移属性都可以同时使用，并且可以达到一些意想不到的效果。以下基于绝对定位偏 移属性的应用
应用
【1】全屏自适应
实现一个距离屏幕右侧 200px 的全屏自适应的容器层
复制代码 .box{
position: absolute; top: 0; left: 0; right: 200px; bottom: 0; background-color: pink; } 复制代码 <div class="box"></div>
} 复制代码 复制代码 <div class="box">
<div class="out"> <!-- 对于 safari 浏览器需要添加空格 来触发右对齐，其他浏览器则不需要--> <ul class="list"> <li class="in">一</li> <li class="in">二</li> <li class="in">三</li> </ul>
<div class="box"> <ul class="list" id="list"> <li class="in">第 1 个</li> <li class="in">第 2 个</li> <li class="in">第 3 个</li> <li class="in">第 4 个</li>
</ul> <div class="l" id="l"><</div> <div class="r" id="r">></div> </div> 复制代码 复制代码
var index = 0; var children = list.children; l.onclick = function(){
if(index > 0){ index --; move(index);
} } r.onclick = function(){ if(index < children.length -1){
很多网站都使用了边缘对齐，但好多都是用页面宽度计算出来的，当宽度变化时需要重新 计算。而无依赖的绝对定位利用静态位置，无需计算就可将其位置确定，且拓展性好
复制代码 body{
margLeabharlann Baidun: 0; } ul{
margin: 0; padding: 0; list-style: none; } .box{ width: 200px; height: 100px; border: 2px solid black; background-color: lightgreen; } .out{ text-align: right; } .list{ position: absolute; margin: 10px 0 0 2px; display: inline-block; } .in{ text-align: center; width: 20px; line-height: 20px; margin-top: 4px; background-color: pink; border-radius: 50%;
<i>*</i><span>手机号</span> </li> <li class="in">
<span>用户名</span>
</li> <li class="in">
<i>*</i><span>密码</span> </li> </ul> 复制代码
偏移属性 当使用偏移属性时，绝对定位元素将相对于包含块进行定位。一般地，我们仅仅使用偏移
CSS 绝对定位的应用
前面的话
之前的博客文章已经详细介绍过绝对定位的基础知识，由于它的用途实在广泛，于是单独 为其写这篇关于其应用的博客。关于绝对定位的基础知识移步至此
静态位置 当元素绝对定位后，若该元素的格式化属性不发生变化，则该元素处于静态位置。关于绝
对定位元素格式化的相关内容移步至此。元素的静态位置是指元素在正常流中原本的位置，更 确切的讲，顶端的静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。假想框 是假设元素 position 属性为 static 时元素的第一个框。
【2】左右半区翻图
一些选项卡中存在右右半区的翻图效果，点击左覆盖区切换到上一张图片，点击右覆盖区 切换到下一张图片。
复制代码 ul{
margin: 0; padding: 0; list-style: none; } .box{ position: relative; width: 300px; height: 200px; border: 2px solid lightgray;
</ul> </div> 复制代码 复制代码 input.onfocus = function(){
list.style.display = 'block'; } input.onblur = function(){
list.style.display = 'none'; } 复制代码
【4】边缘对齐
</div> </div> 复制代码
【5】星号
在很多注册或登录页面中，存在用*表示的必填项。*和*号对齐，文字和文字对齐。这种情 况使用静态位置的绝对定位比较合适
复制代码 body{
margin: 0; } ul{
margin: 0; padding: 0; list-style: none; } i{ font-style: normal; color: red; position:absolute; margin-left: -10px; } .list{ width: 100px; padding-left: 20px; border: 2px solid black; line-height: 2; } 复制代码 复制代码 <ul class="list"> <li class="in">
<ul class="list" id="list"> <li class="in">选项一</li> <li class="in">选项二</li> <li class="in" style="margin-bottom: -1px">选项三</li>
index++; move(index); } } function move(index){ list.style.left = '-' + index*100 + '%'; } 复制代码
text-align: center; font: 40px/200px '宋体';
color: white; overflow: hidden; } .list{ position: absolute; width: 400%; left: 0; top: 0; bottom: 0; transition: left 1s; } .in{ float: left; width: 25%; background-color: lightgreen; } .l,.r{ position: absolute; opacity: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.1); cursor: pointer; } .l{ left: 0; right: 50%; } .r{ left: 50%; right: 0; } .l:hover,.r:hover{ opacity: 1; transition: 1s; } 复制代码 复制代码
应用
以下是基于绝对定位静态位置的应用
【1】自适应位置的跟随图标
图标使用不依赖定位父级的 absolute 和 margin 属性进行定位，这样，当文本的字符个数改 变时，图标的位置可以自适应
复制代码 div{
height: 20px; width: 500px; line-height: 20px; margin-bottom: 30px; } i{ position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/hot.gif'); } 复制代码 <div>长度可变文字<i></i></div>
【2】视频图片上的小图标提示
一般在视频图片上的边角上都会有"自制"、"最新"、"1080p"等诸如此类的提示。使用不依 赖的绝对定位属性，可以让父级元素不设置 relative，拓展性更强
复制代码 i{
position: absolute;
width:40px; text-align: center; height: 18px; line-height: 18px; font-style: normal; background-color: orange; color: white; padding: 2px; } .box{ height: 200px; width: 200px; border: 2px solid gray; } .in{ width: 100%; height: 100%; line-height: 100px; background-color: pink; display:inline-block; } .rt{ margin-left: -44px; } .lb{ margin-top: -22px; } .rb{ float: right; margin-top: -22px; margin-left: -44px; } 复制代码 复制代码 <div class="box"> <i class="lt">自制</i> <div class="in">测试内容</div><!---><i class="rt">独家</i> <i class="lb">1080p</i> <span style="width: 100%;display:inline-block"></span><!---><i class="rb">最新</i> </div> 复制代码
【3】下拉菜单
一般地，下拉菜单作为一个组件需要使用在各种场景中，如果给组件添加 relative 属性，则 降低了其利用率。
复制代码 body{
margin: 0; } ul{
margin: 0; padding: 0; list-style: none; } input{ padding: 0; border: 0; } .box{ width: 200px; height: 38px; border: 2px solid gray; } .con{ overflow: hidden; } .input{ float: left; width: 160px; height: 38px; } .search{ width: 38px; height: 38px; float: right; background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px; } .list{ display:none; position: absolute; width: 158px; border: 1px solid #e6e8e9; overflow: hidden; } .in{ line-height: 30px; border-bottom: 1px solid lightblue; cursor:pointer; text-indent: 1em; } .in:hover{ background-color: #f9f9f9; } 复制代码 复制代码
属性中的两个，且这两个属性不对立。但实际上，对立的偏移属性如 left 和 right 可以同时使用， 甚至 4 个偏移属性都可以同时使用，并且可以达到一些意想不到的效果。以下基于绝对定位偏 移属性的应用
应用
【1】全屏自适应
实现一个距离屏幕右侧 200px 的全屏自适应的容器层
复制代码 .box{
position: absolute; top: 0; left: 0; right: 200px; bottom: 0; background-color: pink; } 复制代码 <div class="box"></div>
} 复制代码 复制代码 <div class="box">
<div class="out"> <!-- 对于 safari 浏览器需要添加空格 来触发右对齐，其他浏览器则不需要--> <ul class="list"> <li class="in">一</li> <li class="in">二</li> <li class="in">三</li> </ul>
<div class="box"> <ul class="list" id="list"> <li class="in">第 1 个</li> <li class="in">第 2 个</li> <li class="in">第 3 个</li> <li class="in">第 4 个</li>
</ul> <div class="l" id="l"><</div> <div class="r" id="r">></div> </div> 复制代码 复制代码
var index = 0; var children = list.children; l.onclick = function(){
if(index > 0){ index --; move(index);
} } r.onclick = function(){ if(index < children.length -1){
很多网站都使用了边缘对齐，但好多都是用页面宽度计算出来的，当宽度变化时需要重新 计算。而无依赖的绝对定位利用静态位置，无需计算就可将其位置确定，且拓展性好
复制代码 body{
margLeabharlann Baidun: 0; } ul{
margin: 0; padding: 0; list-style: none; } .box{ width: 200px; height: 100px; border: 2px solid black; background-color: lightgreen; } .out{ text-align: right; } .list{ position: absolute; margin: 10px 0 0 2px; display: inline-block; } .in{ text-align: center; width: 20px; line-height: 20px; margin-top: 4px; background-color: pink; border-radius: 50%;
<i>*</i><span>手机号</span> </li> <li class="in">
<span>用户名</span>
</li> <li class="in">
<i>*</i><span>密码</span> </li> </ul> 复制代码
偏移属性 当使用偏移属性时，绝对定位元素将相对于包含块进行定位。一般地，我们仅仅使用偏移
CSS 绝对定位的应用
前面的话
之前的博客文章已经详细介绍过绝对定位的基础知识，由于它的用途实在广泛，于是单独 为其写这篇关于其应用的博客。关于绝对定位的基础知识移步至此
静态位置 当元素绝对定位后，若该元素的格式化属性不发生变化，则该元素处于静态位置。关于绝
对定位元素格式化的相关内容移步至此。元素的静态位置是指元素在正常流中原本的位置，更 确切的讲，顶端的静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。假想框 是假设元素 position 属性为 static 时元素的第一个框。
【2】左右半区翻图
一些选项卡中存在右右半区的翻图效果，点击左覆盖区切换到上一张图片，点击右覆盖区 切换到下一张图片。
复制代码 ul{
margin: 0; padding: 0; list-style: none; } .box{ position: relative; width: 300px; height: 200px; border: 2px solid lightgray;
</ul> </div> 复制代码 复制代码 input.onfocus = function(){
list.style.display = 'block'; } input.onblur = function(){
list.style.display = 'none'; } 复制代码
【4】边缘对齐
</div> </div> 复制代码
【5】星号
在很多注册或登录页面中，存在用*表示的必填项。*和*号对齐，文字和文字对齐。这种情 况使用静态位置的绝对定位比较合适
复制代码 body{
margin: 0; } ul{
margin: 0; padding: 0; list-style: none; } i{ font-style: normal; color: red; position:absolute; margin-left: -10px; } .list{ width: 100px; padding-left: 20px; border: 2px solid black; line-height: 2; } 复制代码 复制代码 <ul class="list"> <li class="in">