- 浏览: 1111103 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
1、问题:
如果 position : absolute ,如何又相对定位?
就是相对父元素,的绝对定位。
2、答案
当 父元素 的 position 设为 relative 时,
其子元素的 absolute position 是按照父元素的相对位置来的
3、示例
效果:
分析:
h2标题的 class 属性,position设为 absolute ,其 top = left = 0 ,
如果没有父元素,它应该显示在 页面最左上角,覆盖掉 p 的内容。
实际,由于它的父元素的 position 设置为 relative,排在了 p 的下面 ,所以它的 绝对位置,是相对于父元素的位置的。故:显示在 p 的下方。
4、api参考
下面是w3school的一段说明:
absolute:相对于 static 定位以外的第一个父元素进行定位。
也就是父元素的position取值可以是:absolute fixed relative inherit
显然,最可能和常用的取值是 relative
5、原理
绝对定位
绝对定位使元素在文档流中不占据任何空间。
(文档流中的其它元素的布局就像绝对定位的元素不存在一样)。
这一点与相对定位不同,相对定位的元素实际上被看作普通流定位模型的一部分,
它占据普通流中的空间,也会影响到普通流中其它元素的布局。
6、对比、拓展
float
css 另外一个属性 float 也会使元素脱离文档流,不占据普通流中的空间。
注意:
float 属性只控制左右移动。不控制上下移动。
也就是在当前位置的基础上向左, float:left ,或 向右 float:right
而不会向上或向下调整位置。
http://www.w3school.com.cn/css/css_positioning_floating.asp
clear属性
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。(自己新起一行)
下面的例子中(右边第一个图),对段落二使用了clear:left
比较:
position = absolute 可以相对于position = relative 的父元素内任意定位。
而 float 则是控制元素左右滑动,具有对齐的效果。
注意:
如果设置了 position = absolute,但是 没有给其指定 left、right,或者是 top、bottom,
则元素的 left 和 top 会 按 position = static 时计算。
这一点有时很有用。
比如 top 不指定,则 top 的值是动态按文档的相对位置分配的。
-
引用请注明
原文出处: http://lixh1986.iteye.com/blog/1948337
-
如果 position : absolute ,如何又相对定位?
就是相对父元素,的绝对定位。
2、答案
当 父元素 的 position 设为 relative 时,
其子元素的 absolute position 是按照父元素的相对位置来的
3、示例
<html><head> <style type="text/css"> .pre { color:red; } .parent{ position:relative; left:0px; top:0px; margin:0; padding:0; } h3.pos_abs{ position:absolute; left:0px; top:0px; margin:0; padding:0; } </style> </head> <body> <p class='pre'>我没有被下面的元素覆盖</p> <div class="parent"> <h5 class="pos_abs"> 我虽然使用了绝对定位,<br> 但我的父元素的 position属性为 relative,<br> 所以我仍然在下面 </h5> </div> </body></html>
效果:
分析:
h2标题的 class 属性,position设为 absolute ,其 top = left = 0 ,
如果没有父元素,它应该显示在 页面最左上角,覆盖掉 p 的内容。
实际,由于它的父元素的 position 设置为 relative,排在了 p 的下面 ,所以它的 绝对位置,是相对于父元素的位置的。故:显示在 p 的下方。
4、api参考
下面是w3school的一段说明:
absolute:相对于 static 定位以外的第一个父元素进行定位。
也就是父元素的position取值可以是:absolute fixed relative inherit
显然,最可能和常用的取值是 relative
5、原理
绝对定位
绝对定位使元素在文档流中不占据任何空间。
(文档流中的其它元素的布局就像绝对定位的元素不存在一样)。
这一点与相对定位不同,相对定位的元素实际上被看作普通流定位模型的一部分,
它占据普通流中的空间,也会影响到普通流中其它元素的布局。
6、对比、拓展
float
css 另外一个属性 float 也会使元素脱离文档流,不占据普通流中的空间。
注意:
float 属性只控制左右移动。不控制上下移动。
也就是在当前位置的基础上向左, float:left ,或 向右 float:right
而不会向上或向下调整位置。
http://www.w3school.com.cn/css/css_positioning_floating.asp
clear属性
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。(自己新起一行)
下面的例子中(右边第一个图),对段落二使用了clear:left
比较:
position = absolute 可以相对于position = relative 的父元素内任意定位。
而 float 则是控制元素左右滑动,具有对齐的效果。
注意:
如果设置了 position = absolute,但是 没有给其指定 left、right,或者是 top、bottom,
则元素的 left 和 top 会 按 position = static 时计算。
这一点有时很有用。
比如 top 不指定,则 top 的值是动态按文档的相对位置分配的。
-
引用请注明
原文出处: http://lixh1986.iteye.com/blog/1948337
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 398flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 755效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 438css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8282Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1466效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2406在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1317HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1962效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1243Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2186CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 554@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 927A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 680导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1094效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2912效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16767- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 998在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2219原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4561效果: 代码: <!DOCTYPE htm ...
相关推荐
前言 有时候,我们需要如下图这样一个悬浮效果需求: 实现 在标准的正常的情况下,只能使用 绝对定位 来完成。 第一步:父容器定位设置为 relative(相对.../*父元素>相对定位*/ } #b{ width: 150px; height:50px;
这样,子元素就会相对于这个父元素定位,而不是相对于文档流。 2. **滚动条处理**:如果父元素设置了`overflow: auto;`,那么它内部的滚动条只会影响父元素的内容,而不会影响到绝对定位的子元素。这意味着子元素会...
### CSS子元素相对父元素进行定位的实现 #### 解决方案概述 在Web开发中,经常需要对页面中的元素进行精确的布局控制。CSS提供了多种定位机制,其中相对定位(`relative`)与绝对定位(`absolute`)是两种常用的...
使用 position: relative 定位父元素,position: absolute 定位子元素时,子元素将相对于父元素进行定位。例如: ```html <div id="div-1"> <div id="div-1a">this is div-1a element. ``` ```css #div-1 { ...
相反,它会相对于最近的已定位祖先元素(即拥有非`static`定位的父元素,如`relative`、`absolute`或`fixed`)进行定位。如果没有这样的祖先,元素将相对于浏览器窗口或视口(初始包含块)定位。 下面是一个简单的...
absolute 定位的元素是相对于 static 定位以外的第一个父元素举行定位的,而 relative 定位的元素是相对于其正常位置举行定位的。 在实际应用中,我们可以根据需要选择使用 absolute 或 relative 定位。例如,如果...
在这种情况下,子层的相对定位是基于其最近的具有定位属性的父层来进行的。例如,如果有一个外部层使用了`position: relative;`,那么其内部的任何子层(使用`position: absolute;`)都会相对于这个外部层进行定位。...
当我们选择不同的 position 值时,元素的排版方式将发生变化,例如从 static 到 absolute,元素将从文档流中脱离,并相对于其父元素进行绝对定位。 position 属性是 CSS 中一个非常重要的属性,掌握其使用方法可以...
总结来说,position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素(或者初始包含块)进行定位,而relative则让元素保持在文档...
属性:position 作用:检索或者设置元素的定位方式(改变元素位置的属性) ... b : 假如 当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物。 c : 绝对定位,脱离文档流、不占据空间
绝对定位元素即使z-index值很高,如果其设置相对定位的父元素没有设置z-index值的话,其可能(这种可能性当然是布局存在遮盖的时候)会被后面设置了相对定位的元素遮挡(即使后面的相对定位的元素没有设置z-index值...
而offset()方法则总是返回元素相对于文档的偏移量,其返回的左边距和上边距与页面在加载时的状态有关,不受父元素定位方式的影响。这意味着,即使父元素是静态定位,使用offset()方法也能得到元素相对于文档的位置。...
在网页设计和开发中,布局和元素定位是至关重要的部分,尤其对于动态和响应式的页面。"绝对定位+相对定位的妙用"是CSS布局技术中的核心概念,它可以帮助我们精确控制网页元素的位置,实现复杂而精致的设计效果。下面...
`后,可以使用这些属性使其在父元素内特定位置定位。 一个常见的误解是认为`position: relative;`是元素的默认属性。实际上,元素的默认`position`是`static`,这意味着元素按照正常的流顺序排列,不受`top`、`...
元素的位置通过left, right, top, bottom属性指定,即使父元素移动,已定位的子元素也会跟随移动。 3. 相对定位(relative):相对定位保留元素在文档流中的原始位置,然后通过left, right, top, bottom属性相对于...
在CSS布局中,绝对定位(absolute positioning)是一种强大的定位机制,允许元素脱离其正常文档流,并根据相对于其他元素或浏览器窗口进行定位。本篇将深入探讨绝对定位的参考对象、工作原理及其在实际开发中的应用...
在CSS中,绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位,若所有父元素都没有定位,则依据body根元素(浏览器窗口)进行定位。绝对定位使元素的位置与文档流无关,因此不占据空间。...
4. absolute定位:绝对定位元素的位置是相对于其最近的已定位(非static)父元素。如果没有这样的父元素,那么它相对于整个html文档进行定位。使用absolute定位的元素不会保留它在文档流中的原始空间,因此可能与...
`时,它会脱离正常的文档流,并尽可能向左或向右移动,直到碰到父元素的边界或其他浮动元素的边界。 例如: ```css .float-left { float: left; } .float-right { float: right; } ``` - **特点**: - ...