2.5 CSS定位_HTML视频教程

- 灬无言 - 阅 4,322

CSS定位属性,主要由position(定位方式)、z-index(层叠顺序)、float(浮动)、clear(清除属性)、overflow(超出范围)等来掌控。

Web前端开发需要像素级精准,故定位尤其重要。

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

 

2.5.1 定位方式

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;

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

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

2.5.2 层叠顺序

层叠顺序可设置层的先后顺序和覆盖关系。

默认情况下z-index值为1,表示该层位于最底层。

语法:z-index : 值。 值为auto或者数字。

例:

#image1 {

position : absolute;

z-index : 1;

}

p {

position : absolute;

z-index : 2;

}

2.5.3 浮动

float(浮动)的框,可以向左或向右移动,直到它的外边缘碰到包含框或者另外一个浮动框的边框为止。

由于浮动框不再文档的普通流中,所以文档的普通流中的块框表现的像浮动框不存在。

float属性值:left right none 依次为浮动左侧,浮动右侧,对象浮动。默认值none。

例:

#div1 {

width:100px;

height:100px;

float:left;

}

#div2 {

width:100px;

height:100px;

float:left;

}

2.5.4 清除属性

clear可指定一个元素是否允许有其他元素漂浮在它的周围。

语法:clear: 值。

clear值:none、left、right、both。

例:clear:left;

2.5.5 超出范围

当前层内超出层所能容纳的范围时,可以使用overflow提供显示方式。

语法:overflow:值;

overflow值:

  • 层大小和内容都会显示出来:visible
  • 只有超出层的范围时,显示滚动条:auto
  • 隐藏超出层范围的内容:hidden
  • 总是显示滚动条:scroll

例:

overflow:scroll;

图文不够清楚?请观看小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

32

本文转载 " https://www.xxkt.org/1591 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

error: Content is protected !!