CSS-absolute特性及应用

最新推荐文章于 2021-08-04 00:10:44 发布

柒青衿

最新推荐文章于 2021-08-04 00:10:44 发布

阅读量716

点赞数

分类专栏： CSS 文章标签： CSS absolute 定位

本文链接：https://blog.csdn.net/qiqingjin/article/details/50408571

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. absolute的特性

（1）可以超越overflow

滑动滑块，关闭按钮不动

（2）无依赖的absolute

1）折翼的天使、去浮动、位置跟随

此种情况，如果先给第二张照片设置float再设absolute与只设置absolute效果一样。说明absolute具有去浮动性。inline或inline-block的元素浮动后效果如上图，block的元素浮动后依然是单行显示，不会因为absolute而inline化。

2）使用margin精确定位

absolute化的元素，在不依赖父元素relative的情况下，可以与普通元素一样使用margin实现精确定位，包括负值定位。

2. absolute特性的应用（主要计划好absolute元素在HTML中的位置）

（1）图标定位

<!doctype html>

<html>

<head>

<title>图标定位二三事</title>

<style>

body { font: 14px/1.4 "Microsoft YaHei";background-color: #EDEFF0; }

body, h3, h5 { margin: 0; }

img { border: 0 none; vertical-align: bottom; }

.l { float: left; }.r { float: right; }

.constr { width: 1200px; margin-left: auto; margin-right: auto;}

.header { background-color: #2A2C2E; }

.nav { height: 60px; }

.nav-list { float: left; font-size: 14px; font-weight: 400; }

.nav-a { display: inline-block; line-height: 20px; padding: 20px35px; color: #B5BDC0; text-decoration: none; }

.nav-a:hover { color: #fff; }

.course { padding-top: 10px; }

.course-list { float: left; width: 280px; height: 240px; margin:5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9;background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5;text-decoration: none; }

.course-list-img { background-color: #6396F1; }

.course-list-h { line-height: 50px; font-size: 14px;font-weight: 400; color: #363d40; text-align: center; }

.course-list-tips { margin: 0 14px; font-size: 12px; color:#b4bbbf; overflow: hidden; }

.icon-hot { position: absolute; width: 28px; height: 11px;margin: -6px 0 0 2px; background:url(http://img.mukewang.com/545304730001307300280011.gif); }

.icon-recom { position: absolute; line-height: 20px; padding: 05px; background-color: #f60; color: #fff; font-size: 12px; }

.icon-vip { position: absolute; width: 36px; height: 36px;margin-left: -36px; background:url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em;overflow: hidden; }

</style>

</head>

<body>

<divclass="constr">

<divclass="nav">

<h3class="nav-list">

<ahref="http://www.imooc.com/course/list" class="nav-a">课程</a>

</h3>

<h3class="nav-list">

</h3>

<h3class="nav-list">

<ahref="http://www.imooc.com/seek/index" class="nav-a">

求课<iclass="icon-hot"></i>

</a>

</h3>

</div>

<divclass="constr">

<ahref="http://www.imooc.com/view/121"class="course-list">

<divclass="course-list-img">

<img width="280" height="160" alt="分享：CSS深入理解之float浮动"src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--

--><i class="icon-vip">vip</i>

</div>

<h5class="course-list-h">分享：CSS深入理解之float浮动</h5>

<divclass="course-list-tips">

</div>

</a>

</div>

</body>

</html>

总结：图标绝对定位，用margin来进行图标位置微调。效果如下。

（2） absolute实现下拉框

一般会父元素relative，下拉框用left、top值控制，现在只用absolute实现

(3) 用text-align:center居中定位absolute元素

图中慕客图标宽度为52px，故margin-left:-26px

下图比较实用，父元素text-align:right，子元素fixed

(4) 注册页面星号对齐

(5)字符图标对齐

注意：margin-left的值为负的图标宽度

(6) 溢出容器可显示

absolute后不占据实际位置，哪怕只有0px，绝对定位的元素仍然会跟在HTML文档中它之前的元素后。

3. absolute浮动（top left bottom right）

（1）如何限制浮动范围

(2) left right topbottom 与 width height

1）0.5 黑色遮罩层实现

注意：绝对定位的居中效果！

柒青衿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-absolute特性及应用

1. absolute的特性（1）可以超越overflow滑动滑块，关闭按钮不动（2）无依赖的absolute1）折翼的天使、去浮动、位置跟随此种情况，如果先给第二张照片设置float再设absolute与只设置absolute效果一样。说明absolute具有去浮动性。inline或inline-block的元素浮动后效果如上图，block的元素浮
复制链接

扫一扫