Postion定位的疑惑

最新推荐文章于 2024-05-08 18:28:38 发布
最新推荐文章于 2024-05-08 18:28:38 发布
阅读量638 收藏
点赞数
分类专栏： 杂谈 文章标签： position w3c html xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lkprogram/article/details/22413085
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position</title>

</head>

<body>

	<div style="width:500px; height:500px; background-color:#000000; position:relative;">
		<div style="width:500px; height:100px; background-color:#FF0000; position:absolute;top:0;left:0" ></div>
		<div style="width:500px; height:100px; background-color:#FF0000; margin-top:150px; "></div>
		<div style="width:500px; height:100px; background-color:#FF0000; position:absolute; bottom:0; right:0;"></div>
	</div>

</body>
</html>

 

--------------------------------------

|                     上                         |

|-------------------------------------

|                      中                        |

|-------------------------------------

|                      下                        |
--------------------------------------

 

想实现这样的效果，可是上面的代码跑出来的效果是 整个大的div往下挪动了150px,觉得很奇怪。

<div style="width:500px; height:100px; background-color:#FF0000; margin-top:150px; "></div>


换成绝对定位或者相对定位都可以解决该问题。

 

按照正常的思想中间那一层距离他的父层top150px，应该没问题的啊，求解释。

苦逼程序员_2012
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
postion定位的问题
05-13
postion定位的问题postion定位的问题
position定位
m0_62351590的博客
01-07 8545
position定位都有哪些: position的含义是指定位类型，取值类型可以有：static、relative、absolute、 fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。 1.position: static(默认） static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会
定位（Position）
yxiangy的博客
08-01 801
定位（Position）
盒子模型&position定位
codeAB
07-02 3308
有时候深深的感觉语文这门课程其实很有用， 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之：认真阅读小心品味 当然，前面的孤言自语和本文无关，只是笔者在有段时间内误解一个与本文有关的知识点源于阅读的不小心， 笔者在写本篇文章之前阅读了大量的资料，试图以一种简单易懂的方式把布局的精髓展现给读者； 盒子模型：
css定位(position)
前端叶荨，随手记
06-10 633
css定位是用来指定元素在文档中的定位方式。不决定元素在文档中的最后位置 从图中可以看出，css中的position属性目前市面上的大多数浏览器全都支持。position属性值有五个，分别是：这是一个关键字，元素设置了这个属性，就表示他是正常的布局方式，如果再设置了top、 bottom、left、right、z-index等属性，那么这些属性就不会起作用,失效了 接下来看一个例子，首先是正常布局，加上了top，left等属性： 运行截图如下： 这是没有给div增加position：static属性的样
CSS中关于position
W1948730080的博客
06-06 450
position的功能就如它的中文意思一样——位置。在CSS中position有四个属性：1.静态(static)2.绝对定位(absolute)3.相对定位(relative)4.固定定位(fixed)1.静态position:static;   静态就是默认值，是基本的定位规则，不使用position默认就是position:static。2.绝对定位position:absolute;绝对定...
全面剖析CSS Position定位
09-24
帮助大家全面剖析了CSS Position定位，CSS Position前端必学必会的内容，感兴趣的小伙伴们可以参考一下
css position 定位
01-19
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...
通过position定位实现div底端对齐
09-25
主要介绍了通过position定位实现div底端对齐，感兴趣的朋友可以参考下
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
详细了解postion定位布局
weixin_43983960的博客
05-16 2876
网页的浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，此时页面布局操作也变得更加随心所欲。因此在实际开发中，灵活使用这两种布局方式，更好地满足开发需求。 一，定位布局的介绍 对于定位布局，position属性取值如下表所示。 属性值 说明 作用的位置对象 fixed 固定定位 相对于浏览器四条边的位置 relative 相对定位 相对于元素相对原始的位置 absolute 绝对定位 （默认浏览器）常用于相对于父级元素来定位布局元素的位.
HTML Audio标签src使用base64字符
最新发布
天时 地利 人和
05-08 104
【代码】HTML Audio标签src使用base64字符。
8-3 html中的表单标签 select和textarea
weixin_61897906的博客
05-08 265
跟学b站黑马程序员pink老师，之前发过长篇，太长不好阅读，拆分成短篇。
8-2 html中的表单标签 input
weixin_61897906的博客
04-30 591
标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上：比如在选择性别时，不需要点击单选按钮，只需要点击单选按钮的文字"男"，即可选择<head><title>label标签</title></head><body>性别：<br><input type="radio" name="sex" value="男" id="男"> <label for="男">男
cefsharp实现资源替换如网页背景、移除替换标签、html标识、执行javascript脚本学习笔记（含源码说明）
无线智能模块 可视DIY智能专家
05-02 169
通过自定义的浏览器cefsharp实现某系统的登录，背景图片替换，标题替换，标签移除替换等
前端html中iframe的基本使用
Keep trying, keep going
04-30 853
的容器，通过 CSS 控制容器的样式和尺寸。此示例中的通信是在同一个域名下进行的，因此没有出现跨域问题。// 通过通过父窗口找到子窗口的window， 再向子窗口发送消息。因此，postMessage的作用是 父窗口向子窗口发送了一条消息。// 父窗口 监听子窗口发出的消息(如果有；需要注意的是，由于跨域安全策略的限制，父窗口只能与同源的。事件，当页面加载完成时，隐藏覆盖层，显示。是父窗口（当前窗口）中的一个引用，通过。中加载的文档的通信。元素嵌入子窗口的，可以通过。对象，并与子窗口进行通信。
HTML批量文件上传2——进度条显示
sunbeacher的博客
05-08 648
非常棒的案例，批量文件上传，带进度条，已验证的场景：PHP+JavaScript； Servlet+JavaScript； 使用的环境：Tomcat；
元素position定位
07-28
元素的position属性用于定义元素在文档中的定位方式。常见的取值有： 1. static（默认值）: 元素按照正常的文档流进行定位，不会受到top、bottom、left、right等属性的影响。 2. relative: 元素相对于其正常位置进行定位，通过设置top、bottom、left、right等属性来调整元素的位置。相对定位不会影响其他元素的布局。 3. absolute: 元素相对于其最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于文档的body元素进行定位。通过设置top、bottom、left、right等属性来调整元素的位置。绝对定位会脱离正常文档流，不占据原有位置。 4. fixed: 元素相对于浏览器窗口进行定位，通过设置top、bottom、left、right等属性来调整元素的位置。固定定位会脱离正常文档流，不占据原有位置。 5. sticky: 元素在跨越特定阈值前为相对定位，之后为固定定位。通过设置top、bottom、left、right等属性来调整元素的位置。 这些position属性可以与其他属性（如z-index）结合使用，来实现更复杂的布局效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值