美文网首页
CSS核心属性7---position 定位

CSS核心属性7---position 定位

作者: 阿甘笔记 | 来源:发表于2016-05-18 16:47 被阅读79次

position 定位属性,检索对象的定位方式;

一、语法:position:static /absolute/relative/fixed

取值:

1、static:默认值,无特殊定位,对象遵循HTML原则;

2、absolute:绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据body对象(浏览器),而其层叠通过z-index属性定义;

3、relative :相对定位,对象不可层叠,将依据right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置;

4、fixed:(固定定位)未支持,对象定位遵从绝对定位方式(absolute);但是要遵守一些规范;


二、绝对定位和相对定位的区别

1、参照物不同绝对定位的参照物是包含块,相对定位的参照物是元素本身位置;

2、绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。

三、包含块的概念及作用


        包含块是绝对定位的基础,包含块就是为决定定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;

        默认状态下,body是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块:给绝对定位元素的父元素添加声明position:relative;

四、定位元素层叠属性:

z-index : auto |

检索或设置对象的层叠顺序。

auto:默认值。遵从其父对象

number:无单位的整数值。可为负数

说明:

1)较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。
 此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。


2)这个属性不会作用于窗口控件,如 select 对象。


五、命名锚点链接的应用

定义:

是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。

命名锚点链接的应用:

1)命名锚点的作用:在同一页面内的不同位置进行跳转。

2)给元素定义命名锚记名

语法:<标记   id="命名锚记名">    </标记>

3)命名锚记连接

语法:<a href="#命名锚记名称"></a>
 

相关文章

  • CSS核心属性7---position 定位

    position 定位属性,检索对象的定位方式; 一、语法:position:static /absolute/r...

  • css样式入门书目录

    css样式-字体属性 css样式-背景属性 css样式-边框属性 css样式-列表属性 css样式-定位属性 cs...

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • [note] CSS 定位position|z-index

    内容概述 一. CSS属性 - position CSS属性 - positionstatic:静态定位relat...

  • 2018-09-19 css核心属性

    DAY4:CSS核心属性 学习目标 1、css浮动属性详解 2、css文本属性 3、css列表属性 4、css背景...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

  • CSS 定位

    元素的定位属性 元素定位属性 定位模式 边偏移 边偏移 定位模式 在 CSS 中,position 属性用于定义元...

  • CSS布局

    CSS入门(3) CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+...

网友评论

      本文标题:CSS核心属性7---position 定位

      本文链接:https://www.haomeiwen.com/subject/kuywrttx.html