css绝对定位用在干什么的地方

2024-08-19

CSS绝对定位的应用

× 目录 [1]跟随图标 [2]视频提示 [3]下拉菜单[4]边缘对齐[5]星号 [6]全屏适应[7]半区翻图[8]九宫格[9]等高布局[10]整体布局前面的话之前的博客文章已经详细介绍过绝对定位的基础知识,由于它的用途实在广泛,于是单独为其写这篇关于其应用的博客.关于绝对定位的基础知识移步至此静态位置当元素绝对定位后,若该元素的格式化属性不发生变化,则该元素处于静态位置.关于绝对定位元素格式化的相关内容移步至此.元素的静态位置是指元素在正常流中原本的位置,更确切的讲,顶端的静态位置是从

css绝对定位元素实现居中的几个方法

一:CSS绝对定位元素left设为50%实现水平居中绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0px; left:50%; margin-left:-30%; } 这样就能使得一个蓝色区域水平居中二.绝对定位元素的完全居中实现如果要问如何CSS实现绝对定

CSS绝对定位详解

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.直线电机生产厂家元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框. CSS 绝对定位 ( 推荐学习:CSS教程 ) 绝对定位使元素的位置与文档流无关,因此不占据空间.这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置. 普通流中其它元素的布局就像绝对

CSS绝对定位absolute详解

转:https://www.jianshu.com/p/a3da5e27d22b 之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解浮动float,对理解绝对定位absolute会大有帮助. 先说absolute和float的相似处:包裹性和高度欺骗包裹性所谓一图胜千言(唯一的区别是:下图的div增加了absolute) <div style="border:4px solid blue;"&

css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1366*768附近, PC电脑的分辨率一般为 1920*1080: 以下为常见电脑分辨率: 当写网页时,如果在1920这样的大分辨率写好之后,再去小分辨率的笔记本看同样的这个网页,会发现,笔记本电脑显示的基本为宽屏大显示器下网页放大至1.5倍左右的展示效果. 2.为了页面在不同的分辨率下正常显示,要

CSS绝对定位和相对定位 position: absolute/relative

absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute属性. relative(相对定位): 对象会保持在HTML文档流中,对象原本占有的空间不会被覆盖,对象根据前一个对象进行位子偏移. 1.单独设置对象的absolute属性和top,left,right,bottom属性,对象定位方式是以body对象为基准进行偏移的. <style type="

CSS 绝对定位和相对定位

CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在它原来的位置设置固定定位的步骤: 1.设置position:fixed(表示固定定位) 2.确定偏移量 left:距离左边多远. right:距离右边多远. top:距离顶边多远. bottom:距离底边多远. 示例: 样式代码: 结构代码: 示例效果: 相对定位relative 1.如果设置的是相对定位,

css绝对定位、相对定位和文档流的那些事

前言接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是个事,所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系. 文档流的概念确切的说应该是文档文档流模型的机制,html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline).不独占一行如块级元素(block) <div>div1</div&

css绝对定位

绝对定位是我们在使用css时经常使用到的一种布局方式,下面说一下什么是绝对定位. 绝对定位使用position:absolute来定义,首先,要理解的是使用了绝对定位的元素它会脱离文档流,所谓脱离文档流就是它在文档中原来的位置已经不存在了,和它前面及后面的元素都没有什么关系了,我们可以看到一个div元素如果脱离了文档流后,它后面的元素位置会上移,这个div就像是多了一层一样盖在其他元素上面.也正是因为它脱离了文档流,我们才能任意的来重新安排它的位置.那么究竟是怎么来定位的?记住以下内容: 绝对定

详解 CSS 绝对定位

基本定义和用法在 CSS 中,position 属性指定一个元素(静态的,相对的,绝对或固定,以及粘性定位)的定位方法的类型. 当设置 position 属性的值为 absolute 时,生成绝对定位的元素,将该元素从文档流中删除,原来的占位不再存在,并相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. 如果这个父元素是块

深入理解CSS绝对定位

× 目录 [1]定义 [2]特性 [3]display[4]clip[5]静态位置[6]overflow 前面的话前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高.应用场景更广泛.本文将介绍使用绝对定位时的具体细节定义当元素绝对定位时,会从文档流中完全删除.元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于初始包含块document,其边界根据偏移属性放置.元素定位后生成一个块级框,而不

关于div+css布局值得注意的地方

注意项我们知道,如果想要两个 div(即块级元素)挨着一起排列,可以将其设置为inline-block(行内-块元素). 不过要注意两个div内的内容的对齐方式将是垂直中间对齐,所以这时候就需要使用float浮动. 使用float的时候有个问题:当一个元素盒子被浮动后,下面的元素会自动堆叠处理,导致元素不可见. 这时我们可以使用clear属性. 多次遇到的坑当我们使用div+css布局的时候,即使把两个div盒子声明为inline-block,仍然无法使其并排显示. 那么问题就出在于没有声明

CSS绝对定位元素居中的几种方法

转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> 没有宽度<br /&

CSS绝对定位的原点：是在border上、padding上还是在content上？

用了那么久的绝对定位,却一直没在意一个问题,就是绝对定位的原点,究竟是在盒模型的哪一处.今天想到这个问题,直接搜索没有找到标准文档,也没有搜索到相关的问题,于是决定自己动手实现一下看看,并把这个结果发出来让搜索引擎的内容变得更充实点. 代码 <div id="d1"> <div id="d2"></div> </div> body { background-color: black; } #d1 { width: 30

css 绝对定位实现水平垂直居中

负margin实现水平垂直居中 width: 500px; height: 500px; position: absolute; left: 50%; top :50%; margin-left: -250px; margin-top: -250px; css3 translate 实现水平垂直居中 width: 600px; height: 600px; position: absolute; left: 50%; top : 50%; transform: translate(-50%,-5

深入理解CSS绝对定位absolute

前面的话前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高.应用场景更广泛.本文将介绍使用绝对定位时的具体细节定义当元素绝对定位时,会从文档流中完全删除.元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于初始包含块document,其边界根据偏移属性放置.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框.定位元素不会流入其他元素的内容,反之亦然. [注意]如果文档可滚动,绝

div+Css绝对定位(absolute)和相对定位(relative)的总结

1.没有外Div的情况下设置绝对定位(absolute)和相对定位(relative)是没有区别的 2.相对定位占位置而绝对定位不占位置会漂浮在别的Div之上 3.若父Div没有设置定位,子Div要设置位置, 则子Div设置绝对和相对定位,都是相对于body边缘. 4若父Div设置了定位,子div无论是绝对还是相对的定位,都是相对于父Div的位置.

CSS绝对定位属性

position - 类型:用于确定定位的类型,共有绝对(absolute).相对(relative)和静态(static)等3种选择. z-index - Z轴:用于控制网页中块元素的叠放顺序,可为元素设置重叠效果.该属性的参数值使用纯整数,值为0时,元素在最下层,适用于绝对定位或相对定位的元素. visibility - 显示:使用该属性可将网页中的元素隐藏,共有继承(inherit,继承母体要素的可视性设置).可见(visible)和隐藏(hidden)等3种选择. overflow -

CSS 绝对定位与相对定位的区别

设置为绝对定位的元素框从文档流完全删除, 并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块. 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样. 元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框. 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置. 相对定位是“相对于”元素在文档中的初始位置, 而绝对定位是“相对于”最近的已定位祖先元素, 如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 提示:因为绝

CSS绝对定位模拟固定定位

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{ height: 100%; border

css绝对定位用在干什么的地方

热门专题