CSS 绝对定位与相对定位

原创 2016年05月30日 16:07:30

前几天遇到了上班的第一个难题,项目想要实现这样的效果:


一开始我天真地以为只要设置边框加上圆圈的图片就可以了,然而按这种方法实际上实现的效果是这样的:


实际效果比视觉图上下多了两截。。。

但是,聪明如我怎么可以在我的第一个页面上屈服呢!于是在光明正大地看了其他网站类似效果的源码之后,我也get到了这个技能!

原来这里是用到障眼法,分别画出两个细成一条线的div,分别为.border-first和.border-last。(这里需要了解绝对定位和相对定位)

然后调整这两条线(两个div)到合适的位置,这里为了方便观察,线条设置为红色,效果是这样的:


最后,只要将线条设置为白色就大功告成咯~

如果觉得黑色圈圈很丑也可以用图片替换,再改改文字样式就perfect了~


代码演示在这里:https://jsfiddle.net/chenjunxia/8bmLz95n/


在该过程中参考的资料有:

http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

http://blog.sina.com.cn/s/blog_93a6a0c30101fshd.html





版权声明:本文为博主原创文章,未经博主允许不得转载。

看完这个,css中position的绝对定位相对定位就懂了

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对...
  • cyyax
  • cyyax
  • 2016年01月29日 14:32
  • 16401

css定位中绝对定位和相对定位的区别

1、相对定位的元素不会脱离文档流,占用文档流的空间,Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。 2、绝对定位的元素脱离文档流,偏移不影响文档流中的...
  • qq_26291823
  • qq_26291823
  • 2016年01月07日 21:32
  • 1830

CSS中几种控制页面布局的定位机制(相对定位与绝对定位)

CSS中几种控制页面布局的定位机制对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,我去年学习web编程的时候就对这个一知半解,今天,回过头来再次学习we...
  • duang0626
  • duang0626
  • 2017年07月13日 22:17
  • 652

【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

到这里可以验证当使用`top` `right` `bottom` `left` ***(这四个属性可以设置具体的像素数也可以设置百分比)***这样属性改变元素的位置的时候,不会影响其他元素的位置。而使...
  • yisuowushinian
  • yisuowushinian
  • 2015年05月29日 23:01
  • 5985

CSS position 属性:绝对定位与相对定位,以及浮动

可能的值:absolute,fixed,relative,static,static,inherit。 值 描述 absolute 生成绝对定位的元素,相对于 static 定位...
  • xiaozaq
  • xiaozaq
  • 2016年01月17日 17:53
  • 3269

CSS篇之1. CSS 盒子模型,绝对定位和相对定位

1. CSS 盒子模型,绝对定位和相对定位 解答: (1)css盒子模型: CSS中,盒子模型也叫框模型,它规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。在HTML文档中,每个元素...
  • zengyonglan
  • zengyonglan
  • 2016年11月23日 09:47
  • 2373

什么时候用相对定位或绝对定位

要理解定位你要先理解文档流,在文档流中相对定位的元素占有位置,而且会影响后面的元素(块元素、行内块元素),比如两个div并排,另外一个会换行。 111 222 而绝对定位就是把该元素从文档流中踢...
  • whoops_butterfly
  • whoops_butterfly
  • 2017年09月11日 20:54
  • 257

绝对定位还有相对定位,然后是优先级

id="reminder" style="background-color: rgba(0,0,0,0.5); position: fixed; width: 100%; height: 100%; ...
  • weitao_11
  • weitao_11
  • 2015年08月05日 10:34
  • 605

CSS 盒子模型,绝对定位和相对定位

一、盒子模型:         标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面;在混杂模式下,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法...
  • WEB_YH
  • WEB_YH
  • 2016年11月20日 10:22
  • 931

关于css样式绝对定位、相对定位、固定定位的疑难杂症

static relative absolute fixed 之间的关系,区别以及他们的具体用法,有图有真相,看完相信你一定有所收获的。...
  • sinat_31597631
  • sinat_31597631
  • 2017年01月04日 19:34
  • 515
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 绝对定位与相对定位
举报原因:
原因补充:

(最多只允许输入30个字)