CSS绝对定位的应用

【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('/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; } 复制代码 复制代码
index++; move(index); } } function move(index){ list.style.left = '-' + index*100 + '%'; } 复制代码
<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">&lt;</div> <div class="r" id="r">&gt;</div> </div> 复制代码 复制代码
应用
以下是基于绝对定位静态位置的应用
【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('/uploads/rs/26/ddzmgynp/hot.gif'); } 复制代码 <div>长度可变文字<i></i></div>
} 复制代码 复制代码 <div class="box">
<div class="out"> <!-- 对于 safari 浏览器需要添加空格&nbsp;来触发右对齐，其他浏览器则不需要--> &nbsp; <ul class="list"> <li class="in">一</li> <li class="in">二</li> <li class="in">三</li> </ul>
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; } 复制代码 复制代码
var index = 0; var children = list.children; l.onclick = function(){
if(index > 0){ index --; move(index);
} } r.onclick = function(){ if(index < children.length -1){
CSS 绝对定位的应用
前面的话
之前的博客文章已经详细介绍过绝对定位的基础知识，由于它的用途实在广泛，于是单独 为其写这篇关于其应用的博客。关于绝对定位的基础知识移步至此
静态位置 当元素绝对定位后，若该元素的格式化属性不发生变化，则该元素处于静态位置。关于绝
对定位元素格式化的相关内容移步至此。元素的静态位置是指元素在正常流中原本的位置，更 确切的讲，顶端的静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。假想框 是假设元素 position 属性为 static 时元素的第一个框。
<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>
【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> 复制代码
</ul> </div> 复制代码 复制代码 input.onfocus = function(){
list.style.display = 'block'; } input.onblur = function(){