恩佐娱乐

 找回密码
 注册(建议使用中文昵称)

QQ登录

只需一步,快速最先

扫一扫,会见微社区

积分、品级、阅读权限说明社区担保,生意营业无忧
审查: 1966|回复: 7
打印 上一主题 下一主题

[其他教程] 定位代码(20190728更新)

[复制链接]
 成长值: 65258

签到天数: 2367 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10073℃
跳转到指定楼层
楼主
揭晓于 2018-6-25 12:50:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 II.〆石Zi° 于 2019-7-28 22:04 编辑



定位属性可用于种种标签中,好比:table , div ,  P,等等


相对定位:

这是相对于一个父容器内的相对位置,定位参照位置是已有的区域等。好比在一表格内的元素的定位。


  1. <div style="left: -182px; top: -50px; position: relative;">放入你需要定位的元素,好比表格、图片、播放器等</div>
复制代码

建议:
1、帖子第一层定位用此定位,父容器为浏览器区域。使用相对定位,不会由于显示屏、浏览器的巨细和位置变换恩佐娱乐恩佐娱乐而转变。
2、相对定位的弱点:原位置会留空缺。影响原位置加入新元素。



绝对定位:

这是一个父容器内的绝对位置。
1、绝对定位的优点:原位置不会留空缺。便于原位置加入新元素。适用于 “已用相对定位的父容器” 内部各元素的定位。
2、绝对定位的弱点为:帖子第一层若是用绝对定位,那么定位的元素会随着浏览器的放大、缩小而发生移动。


  1. <div style="left: -182px; top: -50px; position: absolute;">放入你需要定位的元素,好比表格、图片、播放器等</div>
复制代码

评分

加入人数 1威望 +1 款子恩佐娱乐 +10 收起 理由
片片枫叶情 + 1 + 10 爱生涯、爱ii23!

审查所有评分

分享到:  QQ挚友和群QQ挚友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋侪腾讯朋侪 微信微信
珍藏珍藏3 转播转播 分享分享 分享淘帖
 成长值: 75819

签到天数: 1953 天

[LV.Master]伴坛终老

只身中……
帮我挣脱只身吧
沙发
揭晓于 2018-6-25 12:57:19 | 只看该作者
这是手把手妄想教学H码啊
想学的赶忙
回复

使用道具 举报

 成长值: 53164

签到天数: 2574 天

[LV.Master]伴坛终老

訡詩
幸福:9071℃
板凳
揭晓于 2018-6-25 13:36:35 | 只看该作者
绝对定位宽屏和窄屏电脑的浏览器寓目就纷歧样了。
回复

使用道具 举报

 成长值: 6565

签到天数: 2329 天

[LV.Master]伴坛终老

只身中……
帮我挣脱只身吧
地板
揭晓于 2018-6-25 17:21:10 | 只看该作者
进来学习了
回复

使用道具 举报

 成长值: 37812

签到天数: 1498 天

[LV.10]以坛为家III

只身中……
帮我挣脱只身吧
我对这个看了也看不懂。
回复

使用道具 举报

签到天数: 69 天

[LV.6]常住住民II

只身中……
帮我挣脱只身吧
绝对定位宽屏和窄屏电脑的浏览器寓目就纷歧样了。
来自: 微社区
回复

使用道具 举报

签到天数: 1 天

[LV.1]初来乍到

只身中……
帮我挣脱只身吧
7#
揭晓于 2018-10-12 08:56:01 | 只看该作者
给力,叨教若是div嵌套div怎么定位好呢
回复

使用道具 举报

 成长值: 65258

签到天数: 2367 天

[LV.Master]伴坛终老

獨噯丶婼詩
幸福:10073℃
8#
揭晓于 2019-7-28 15:16:37 | 只看该作者
本帖最后由 II.〆石Zi° 于 2019-9-18 00:24 编辑

片片枫叶情 揭晓于 2018-6-25 13:36
绝对定位宽屏和窄屏电脑的浏览器寓目就纷歧样了。


帖子第一层(即父容器)定位用相对定位。

子定位所有用绝对定位



https://music.163.com/#/album?id=34913133

回复

使用道具 举报

本版积分规则

小黑屋|手机版|Archiver|广告合作|恩佐娱乐 ( 闽ICP备09017971号  
会员言论仅代表小我私人看法,所有内容由网友自由宣布,如损害你的权益,请联系我们在24小时协助您处置赏罚完毕。

GMT+8, 2019-10-15 17:54 , Processed in 0.078465 second(s), 60 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表