css 定位功能position

Static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。

相对定位Relative
相对定位元素的定位是相对其正常位置。
相对定位三要素:
占位:保留
参考坐标轴原点:以自身为准,横向/纵向偏移
z值:非0整数 如:-1, -2 ,-3 , 1 ,2 ,3等
【注意】位置移动以自己原先的位置为准

绝对定位Absolute
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
绝对定位三要素:
不占位
坐标原点参考父对象
z值:非0整数 如:-1, -2 ,-3 , 1 ,2 ,3等
【注意】位置移动以父元素为准
绝对定位的元素不留占位
会被后来的元素替代
这意味着什么?
兄弟元素不再互相推挤了,他们的位置不会发生联系

父相对,子绝对,子随父移动(记住这话就行了)
绝对/相对配合排版
子随父

固定定位Fixed
与绝对定位非常接近
唯一的不同是固定定位相对的是body
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:

时间: 2024-10-11 23:01:12

css 定位功能position的相关文章

CSS学习------CSS定位(position)与浮动(float)

position属性:用来对元素进行定位 定位的意义: 定位允许你定义元素框相对于其正常位置应该出现的位置. 相对于父元素. 相对于另一个元素. 相对于浏览器窗口本身的位置. 定位分为:绝对定位和相对定位. 相对定位: 如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其它框. 示例: <html>   <

CSS定位属性position

CSS定位元素有3种方式 :普通流.相对位置.绝对位置.通过设置position属性来实现. position属性取值的含义 inherit 继承父元素position 属性的值. static 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). relative 生成相对定位的元素,相对于元素本身正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素. absolute 生成绝

CSS 定位之position

在前端网页布局中,在同一平面上布局,我们大都采用float属性来定位网页元素的位置.但是涉及到弹出层.浮层.页面广告插件等等,都需要CSS中的position属性来定位了,对于初学者来说经常分不清楚是应该用position属性的absolute值.relative值.fixed值等等,下面我们就position属性基本的这三个值的用法做一些简单的介绍,希望对初学者有些帮助. 1.position的absolute(绝对定位) 在这里position的absolute绝对定位我们分两类来讲: A:

css定位、position与float同时使用的情况

一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位. 2.绝对定位:position:absolute/fixed;元素框脱离普通文档流. 3.浮动:float:left/right;元素脱离普通文档流. 二.对元素同时使用position和float的情况 经过实践发现,无论position和float谁写在前面或后面,都是positio

css 定位属性position的使用方法实例-----一个层叠窗口

运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style type="text/css"> div.window{ /*指定窗口的尺寸和边框*/ position:absolute; /*position在其他地方指定*/ width: 300px; /*窗口尺寸,不含边框*/ height: 200px; border: 3px outset

css定位 与position

本文同时发表于本人个人网站 www.yaoxiaowen.com 在正式讨论position之前,我们需要知道几个概念. 块元素:独占一行的元素.比如div,h1~h6,p等,它是自带换行的. 内联元素:就是和相邻的内联元素同在一行的元素,比如span,a,img,small,em之类的. 以上内容是从是否独占一行的角度来说的,从另一个角度来说,也分为两种. 替换元素:就是浏览器根据标签的属性和内容来判断具体显示的内容.input,img,textarea等属于此类,以input为例.<inpu

CSS 定位机制 position

position属性W3School有详细介绍 1.(position:relative;)相对定位会按照元素的原始位置对该元素进行移动.relative 2.(position:absolute;)通过绝对定位,元素可以放置到页面上的任何位置.absolute 3.(position:fixed;)固定定位.fixed dome:垂直排列图象(vertical-align:text-top).vertical

CSS定位属性-position

一.可能的属性值 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.absolute:绝对定位.对象脱离常规流,是基于整个屏幕,生成绝对定位的元素,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素.它的父级元素如果设置 relative ,那就就是基于它的父元素的左上角计算. 3.fixed:固定定位.与absolute一致,生成绝对定位的元素,但偏移

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以