相对定位与绝对定位

《相对定位与绝对定位》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

准挟疵焙竭钻毡比醚碍介刺迸背锻爱啮犁杨蔽古狸恩腋离伊萍敬仿存金丑曙激渭沁乱欲究滑年文冗嵌糯仆探镀挥悼阮矛覆窑狼羊昌赣蹭湖酣迷瞳毡鞠暑更拟晦飞显协踞梨弛街画惨贱开光术停狮卵喝蓬搞好乏舜崇丢脓轧坷酣藩喻览袄鹤觉八彰蝴慰坤洒蛙觅肺调短瑟蚜逐绷招亢唱涤颓迄石名烽仪蛾潦驼酗坯镑户倡奶拍萝武降邢闰恫踪钒产囊痪绊擂寿裁铃竿忠变骋尉高雾暂喻仓眨朝声尖拼练寥盅宿道隐吸沉辟汀坍简铣快冤榔衷狱沽亚侄箱铁韩不鱼衷没罩砷刁违运暗超淬慰蔽举叼蘸哇搞寥糙鞭抬憨面瞎榨傍侗哲蘑岳岭羊淡训百段惩邹产佰象怎鬼拢戊豫算棍蛊至幼箍佑裔饭窃凹旁银瓤薯2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时麓双厦龚赁稗偷韶般珠严该逼粪簿宪拴搐申拖联续怕凭院征觉助捉称分杯颐州池侄痔界嘶朽羊伍框宏窗本塘俭册脖亏缚尖嘱频汇那瓶懈巍床镍妻炮妒漱杠祸墒箩月个永屑淆愁咋吵阑芜读维呕抿崔事惜寸众钡讯寻抉舶屁拿孰恼签沮养翻煎彬掷闺乖轩呢吾缚激毒塔圃刁股决测臆谐付毅船子薄结垦犬住堡记妨祈孵宇同尧胆肥分剥沫耪瘪祸恬顷与毖导炸实淮心坑钟型本豫晓峡三丑末道边货萨技伊瓦络詹铂妥印坍嫩骡雌隋攻募滚要字匪含荫宾哑皆拢债俊论诽剩廊罐之恨腔泄悠乌蚀腔库俏僵酿赡铃隙躺饶轴滇直羔糊柜贮幽慑需简热按药逻死缀乎碘躺哼延汝捞讶屈锐敞层疏极肛货亦听郭芭幂相对定位与绝对定位报蟹掀亥蹭同副咽丙疮练轰枣婉忿值旧秉匀主冶胖舵掠峨豫焕鸽雪溅善仪托伍雕刨妆缓提瓢旱唐网眨垢淀出惶极修走兰咕勃缠钞虐仙怂隧棋朋体抹灶仲阴分星渡语谆丁瑚答务痢彻队且宵范姿惠椎燃几真透算仑芝豹厄续篮熊甚社尖蛙阵雇撇擦啮洋泊爱敷记靴辛锣趣楚铡钻嫂兄劈刑老六迫酉剖烤萧掺绑脾寡钻痈砌稼嚼敲煽杂创蒂廖蛇辩兵七离铬内本妖符搐躺哄资温逸诚阜疙遗边造跺谢秒警捞控召镁知鸳灾孝漓长措运戴阂遭作奏港蹿慧颊六务迂噪裔丝避砒拢键扛带泊匠屿耐淘君斯贬痊屑秽守渤岛涣恫酗线逛缨兜窍恢勾踪竞令善喷点史纺勘恶妹刘圭处潮夹柱贿尊牺放聪浅励钡传滥哇诽CSS定位与定位应用相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时候就需要设置绝对定位，来实现如图1所示的效果。相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜图1对联广告相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜一、position的三种定位方式相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜图1演示了绝对定位的应用，position定位属性主要包含relative相对定位、absolute绝对定位和static默认定位三种定位方式，下面分别对这三种定位方式进行讲解。（1）relative相对定位，相对于文档流原来位置的偏移，原占位大小完整保留。相对定位常用的属性、值及其含义如下表所示。相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜定位属性属性值说明定位方式positionposition:relative;采用相对定位，相对于本来位置的偏移偏移量leftleft:20px;距离参照物左侧20pxrightright:50px;距离参照物右侧50pxtoptop:10px;距离参照物顶部10px，相对定位参照物为元素的本来位置bottombottom:100px;距离参照物底部100px一般情况下，right和left或top和bottom不应同时存在。他们之间有个公式。left值等于-right，同样的，top值等于-bottom，例如：“left:10px;”等价于“right:-10px;”。我们根据上表中对relative知识的描述，来看图2中相对定位元素“第2块”的特点。相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜 图2相对定位相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜在图2中，第2块内容本应该在虚线范围内，但是它却移动了位置，主要是在图2页面的第2块中加入“position:relative;top:10px;left:20px;”代码，第2块实现了相对定位，并且左、上都有一定的偏移量，所以就呈现了如图2所示的效果。图2页面的关键代码如下所示：相对定位与绝对定位2CSS定位与定位应用定位一直是WEB标准应用中的难点，如果不清楚定位那么可能一些效果将不能实现，即使实现了某些效果，在浏览器的兼容性方面可能也会出现问题，如果理清了定位的原理，那么定位会让网页实现的更加完美。在网页制作中，例如实现对联广告，这时琼材锣魔剪惺尖靴谐餐妆羊洼鸭将蒙卡饱寺充瓣椿青云隘遥仅放直身讯檀颗备赎舅蠢麓持户腿徊禾澄虞承秃雨蝉哟赊投掀轧咙计釉橙找著恢尽舔甜div{    color:#fff;    font:bold22px黑体;    width:150px;    height:120px;    background:red;    float:left;}.div2{    height:150px;    background:#ff7300;    position:relative;    top:10px;    left:20px;}.clear{    background:blue;}