CSS-absolute特性及应用

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

柒青衿

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

阅读量755

点赞数

分类专栏： 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">