position属性设置为absolute 的跟随性

有这么个需求：在一个容器的右上角放置一个图标，当这个容器的宽度改变时，图标始终在容器的右上角。如下图所示：

第一幅图片width为200px，第二幅图片width为600px

我们一步步实现此效果。

1）容器和图标显示在一行

用inline-block就可以了，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.div1{width: 200px;height: 200px;background-color: gray;display: inline-block;
}.topRight{width: 80px;height: 80px;background-color: rgb(216, 77, 170);display: inline-block;
}</style>
</head><body>
<div class="div1"> </div>
<div class="topRight">topRight</div>
<script></script>
</body>
</html>

渲染出来的效果如下：

2）设置图标为绝对定位

position 设置为absolute，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.div1{width: 200px;height: 200px;background-color: gray;display: inline-block;
}.topRight{width: 80px;height: 80px;background-color: rgb(216, 77, 170);display: inline-block;position: absolute;
}</style>
</head><body>
<div class="div1"> </div>
<div class="topRight">topRight</div>
<script></script>
</body>
</html>

渲染出来的效果如下：

图标设置为absolute后脱离了文档流，并且跟在容器的后边(跟随性)。另外由于inline-block导致的容器和图标之间的小间距也没有了(都脱离文档流了，小间距自然也就没有了)。

3）再把图标移动到容器的右上角即可

设置margin-left为图标的宽度的负值即可，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.div1{width: 200px;height: 200px;background-color: gray;display: inline-block;
}.topRight{width: 80px;height: 80px;background-color: rgb(216, 77, 170);display: inline-block;position: absolute;margin-left: -80px;text-align: center;line-height: 80px;
}</style>
</head><body>
<div class="div1"> </div>
<div class="topRight">topRight</div>
<script></script>
</body>
</html>

最终渲染出来的效果如下：

当我们改变容器宽度时，图标始终在容器的右上角。所以说上述方式具有自适应性。

position属性设置为absolute 的跟随性相关推荐

ECharts position属性设置（外部、内部、自定义位置）
1 外部 1.1 top(外部正上方) 可应用于:series.label.position. position:top 1.2 bottom(外部正下方) 可应用于:series.label.pos ...
【DOM编程艺术】position属性
position属性的合法值有static.fixed.relative和absolue四种. static是position属性的默认值,意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗 ...
Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
position属性详解
1.static 这是属性是positon的默认值,如果一个div我们没有给他任何的position,那么他不会脱离文档流,他的属性就是static,不理解这个我就没的说了... 2.abso ...
html里position属性,科技常识：详解html中 position属性用法（四种）
今天小编跟大家讲解下有关详解html中 position属性用法(四种) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关详解html中 position属性用法(四种) 的相关资料,希望小 ...
html中position属性默认值,CSS position 属性总结
CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~ 下面是总结内容~ 有疏漏.错误之处敬请指出!o(^▽^)o 一.简介定义:posi ...
position 属性的常用的5种取值
日期:2020 年 6 月 22 日 position 属性前言说到 CSS 的 position 属性,大家都知道也都用过,但是要说它有几个取值以及这些值的不同,可能有部分同学会哑口无言,毕竟这 ...
当子元素设置position absolute的时，父元素必须设置position属性
当子元素设置position absolute的时,父元素必须设置position属性.

position属性设置为absolute 的跟随性

position属性设置为absolute 的跟随性相关推荐

最新文章

热门文章