错误博客( cuowu.com )发布于 2019-06-05 11:34:29

CSS定位方式

CSS定位方式是position的属性应用。

1)position属性

position的属性如下:

  • 默认值:static
  • 绝对位置:absolute

将对象从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。支持层叠通过z-index属性定义。left这些元素的值有三种表示方法:auto、长度值、百分比。auto为默认值。

例如:

position : absolute;

left : 10px;

top : 20px;

距离顶端20像素,距离左侧10像素位置。

  • 页面滚动,元素不随之动:fixed

fixed就是固定不动,不随网页滚动而滚动。

例如:

position : fixed;

  • 相对位置,对象不可层叠:relative

对象不可以层叠,但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

例如:

position : relative;

2)absolute与relative区别

absolute(绝对位置)与relative(相对位置)区别:

  • 前者可以层叠,支持z-index属性;
  • 前者从文档流中拖出,后者还在正常文档流中;
  • 前者相对父元素,使用left:10px;等进行定位,后者相对自身进行定位;
  • 前者移动后,可通过z-index设置堆放次序,后者移动后,覆盖其他元素。

随机文章

万宁网(亚马逊被要求减少商品的过度包装)
富坚义博停更多久了(富坚义博休刊的999天)
潘石屹卖了SOHO中国
小小课堂:主机对SEO有哪些影响
一、PHP本地环境搭建
货币市场工具的收益率-网赚研究院
DNF旭旭宝宝直播时爆料-账号666元出售,这是真的吗?
DNF男气功师-猛虎帝-念皇

错误教程( cuowu.com )专注网推培训、SEO培训、抖音培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码