CSS绝对定位固定定位详解

 绝对定位 的元素基于最近的 position 为 relative/absolute/fixed 祖先元素进行定位。如果没有找到 position 为 relative/absolute/fixed 的元素,则基于是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准,以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形进行定位, 并不是基于根元素定位 。

固定定位 的元素基于viewport(浏览器视窗)进行定位。

1. 绝对定位 和 固定定位 的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。

要使绝对定位或固定定位的元素水平居中,需要设置其 width 为固定值,并且 left: 0; right: 0; 。

2. 绝对定位 和 固定定位 的元素,若其宽度 width 或高度 height 的单位为 百分比 ,宽度和高度值是相对于其基于定位的元素计算的。(在使用一些stick插件时尤其要注意这点)。

例子

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body style="height:1000px;">
<div>
<div id="nomove" style="background:#999999; width:100px; height:100px; left:0; bottom:0; position:fixed;">
</div>
</div>
</body>
</html>

时间: 2024-10-28 03:40:34

CSS绝对定位固定定位详解的相关文章

Android6.0 屏幕固定功能详解_Android

可能大家看到这个标题不知道是什么东西,我先说明下,android6.0在设置->安全->屏幕固定开启后,然后再长按home键出现最近的几个Activity可以选择一个图钉按钮就开启了屏幕固定功能. 屏幕固定开启后,屏幕只能固定在设定的Task上的Activity切换. 一.设置固定屏幕 我们先来看SystemUI/src/com/android/systemui/recents/ScreenPinningRequest.java的代码,这段代码就是长按home键出现几个Activity,然后按

Android6.0 屏幕固定功能详解

可能大家看到这个标题不知道是什么东西,我先说明下,android6.0在设置->安全->屏幕固定开启后,然后再长按home键出现最近的几个Activity可以选择一个图钉按钮就开启了屏幕固定功能. 屏幕固定开启后,屏幕只能固定在设定的Task上的Activity切换. 一.设置固定屏幕 我们先来看SystemUI/src/com/android/systemui/recents/ScreenPinningRequest.java的代码,这段代码就是长按home键出现几个Activity,然后按

CSS魔法堂:Position定位详解

一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top.right和bottom的CSS规则来改变元素的位置.        注意点:[a]. 元素原来位置将保留,不被其他元素所占据;                      [b]. 当使用left,top改变元素位置时,元素将以原来位置的border外边框的左上角作为参考点 ;           

div+css相对定位和绝对定位用法实例详解

本文向大家介绍一下CSS relative相对定位的概念,如果对一个元素进行相对定位,它将出现在它所在的位置上. CSS relative相对定位 设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. CSS 相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像

css 定位详解介绍带实例demo

CSS 相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方.如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动.  代码如下 复制代码 #box_relative {   position: relative;   left: 30px;   t

Android GPS定位详解及实例代码_Android

      GPS定位是智能手机上一个比较有意思的功能,LBS等服务都有效的利用了GPS定位功能.本文就跟大家分享下Android开发中的GPS定位知识.        一.Android基础知识准备        1.Activity类        每一种移动开发环境都有自己的基类.如J2ME应用程序的基类是midlets,BREW的基类是applets,而Android程序的基类是Activity.这个activity为我们提供了对移动操作系统的基本功能和事件的访问.这个类包含了基本的构造

css中position相对定位和绝对定位(relative,absolute)详解

在CSS中有这样的一个指令:(position) 在DW中文版中翻译为"定位",常用的属性有relative(相对)与 absolute(绝对). 有很多朋友对这条指令的用法还是不清楚,这里做一定细致的讲解: position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的.padding与margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为relativ

CSS实例:定位(position)页面定位详解

注:在做这节教程的时候,我又上网查了相关资料,看了大量的文章,做了大量的测试,最后总结出下面这些文字,洋洋洒洒一整篇,不过需要大家一句话一句话的看,一定要仔细喽!还有对于课程中的说的,最好一边看,一边练,不练绝对看不懂! 定位(position)布局页面说容易非常容易,只需要记住这节课最后一句话就可以了,说困难,那是相当的难理解,需要一定的耐心,不过还好,KwooJan给大家总结的已经很通俗易懂了. 如果下面的文字实在是无法理解透,那就记住这节课最后总结的一句话"如果用position来布局页面

JavaScript网页定位详解

 本篇文章主要是对JavaScript网页定位进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth (包括边线的宽)  网页可见区域高:document.body.offsetHeight (包括边线的宽)  网页正文全文宽:document.body.scrollWidth