16. CSS定位:相对定位和绝对定位

HTML教程入门

CSS定位

绝对定位:absolute, 使元素绝对定位,相对于static定位以外的最近的一个祖先元素进行定位。 元素的位置通过“left”, “top”, “right” 以及“bottom” 属性进行规定。

相对定位:如果对一个元素进行相对定位,它将出现在它所在的位置上。 然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

绝对定位和相对定位让很多HTML和CSS初学者混淆,详细介绍绝对定位和相对定位之间的差异。

1、首先创建div,class=”box”
1、width,height;
2、居中;
3、背景颜色;
4、相对定位;
5、right,top,left,bottom
1、为什么我添加top,盒子会往下面移动,不是往上移动200px像素,而是从上面向下移动200像素;
2、left和right都是一样的意思;
3、不要bottom,bottom会向上移动;
4、在wrap相对定位和没有定位的时候,区分left;

6、我们改为绝对定位:
1、绝对定位受其其最近父辈影响;
2、添加div的.wrap
1、width
2、height
3、margin
4、没有添加相对定位的时候;
5、background

例如:left:-35px是向左移动35px以wrap的div;

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年8月15日

Previous Story

HTML教程入门

15. CSS字体:html字体样式

html字体样式:别人的网页都是彩色的,除了a标签之外,没见到颜色、字体、精细等样式啊,今天我们介绍字体样式,通过样式来设计字体,例如字体系列,颜色,字体间距和字体大小。

...