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

我就在那不动了-层模型之固定定位

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

 

任务

我也来试试,实现浏览器视图右下角定位div层。

 

?不会了怎么办

在右侧代码编辑器中输入:

position:fixed;
bottom:0;
right:0;
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

最新回答 / 慕村9445010
中间有个空格需要删除

最新回答 / qq_慕虎8579615
定位边距和层级

最新回答 / 慕码人2439067
可以带单位,也可以不带  不影响

最新回答 / qq_慕瓜7049344
你不是给他固定了一个定位嘛 定位不就代表脱离了文档流嘛

已采纳回答 / 慕前端6591763
你可以理解为相对定位(position relative)是参照系,绝对定位(position absolute)就是移动系。

最新回答 / 一个前端的小白
float具有包裹性 比如文字会环绕  而absolute 没有包裹性  都是脱离文档流的

最新回答 / 湫谷Sama
你是说绝对定位(position: absolute) 嘛?大部分弹窗是根据这个来的,但有部分是根据用户浏览位置进行下滑的(也就是样式更加平滑)

最赞回答 / 我的世界只有一个你
position 属性通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。position 属性值的含义:relative-相对定位元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。absolute-绝对定位元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。fixed...

最新回答 / qq_慕容0063602
这个position: absolute;是让他绝对定位, top: 0; bottom: 0;  left: 0 right: 0;        这个就是让他左右上下距离相等,这样已经居中了,为零就是让他边距变大,就像四边有人扯一块布一样

最新回答 / qq_慕无忌5458971
你的意思是红线框和文字分在,在上下左右?

最赞回答 / 慕瓜4438726
是的 小广告就是利用绝对定位进行设置的

最赞回答 / 慕桂英3007397
大渣好,我系轱天乐,我四渣渣辉,探挽懒月,介四里没有挽过的船新版本,挤需要体验三番钟,里造会干我一样,爱象节款游戏。

已采纳回答 / Mamk773
偏移前的位置保持不动,覆盖不了之前的位置,你可以回去再看看之前的课
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言