章节
问答
课签
笔记
评论
占位
占位

万事无绝对 -层模型之绝对定位

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

效果如下:

任务

我来试一试:设置div标签相对于浏览器,(相对于以前位置右上角)向移动100象素,向下移动20象素。

效果图如下:

?不会了怎么办

是否输入像下面的代码:

position:absolute;
right:100px;
top:20px;
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 千与千寻l
margin是外边距,就好比你家的房子与周围其他房子之间的距离,也就是说margin是受周围其他元素影响的。position则是定位,根据参数的不同会有不同的定位方式。position:relative 是相对定位,是以元素的当前位置来作为定位的参照物,比如left:10px; top:-5px,就是把元素往左挪10像素,往上挪5像素。position:absolute 则是绝对定位,是以整个文档窗口来作为定位的坐标系(原点在左上角),比如left:200px; top:100px,就是把元素移到距离窗口...

已采纳回答 / weixin_慕田峪5531296
absolute绝对定位了,字根据根元素html来定的位,不会受其它字位置的影响,所以浓缩一行了,relative就会被影响

最赞回答 / 曹怼怼呀
<...图片...><html>与</html>就是<body>和<head>的父元素,也就是上下级关系,整个<html></html>就是父包含块,ul就是li的父元素 ,即父子关系

最赞回答 / 与星星同在
向右移100px,表示左边要空出100px,向下移50px,表示上方要空出50px

最新回答 / qq_慕丝8060581
分别是 左 右 上 下

最赞回答 / qq_Gentleman_32
首先要分是什么元素的的移动吧,如要想移动这个div,用margin-top就可以;如果是里面的文字,用padding可以调整

最新回答 / sdarks
这里是因为你设置margin-left:100px后剩下的位置不足以显示输入框,所以会自动换行。如果你不想自动换行,那么将margin-left改小,或者增加width属性,限制其宽度。

最新回答 / 慕姐1519523
把两个放在一个大盒子里,大盒子居中

已采纳回答 / 慕先生0096549
position:relative;left:100px; top:50px;向右移动100px翻译成代码应该是原位置在现位置的左边,对于现位置来说是左100p。我的理解希望可以帮到你。   

最新回答 / 男神章鱼哥
你加了paoiton:relative    paoiton:relative了吗  要加上这个哦  先是相对定位 再在你另一个固定的那里加上绝对定位

最赞回答 / 一个前端的小白
直接right就可以了啊,绝对定位会让float失效的 

最新回答 / 一个前端的小白
overflow:visible(默认值)overflow:hidden(隐藏超出的文字或者图片)overflow:scroll(自动生成滚动条)overflow:auto(如果超出,则生成滚动条)

最赞回答 / 慕雪9247522
直接不写border不就行了吗

已采纳回答 / 我要变好呀
这样看上去一样,但是原来的地方就占空间了。absolute移动的时候原来是没有margin的。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言