HTML利用posotion属性定位小技巧

1.居中效果

父级DIV （index-top ）属性设置为 text-align:center;

子级DIV（ tabIndex-main）属性设置为 margin:0 auto;

2.左右对齐效果

父级DIV（ tabIndex-main）属性设置为 position:relative

子级DIV(city) 跟（search）属性为posotion:absolute

(absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom

等属性相对于其最接近的一个最有定位设置的父对象(position:relative)进行绝对定位。

如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义)

样式：

.index-top {font-family: "微软雅黑";font-size: 15px;color: #f85f48;background-color:#ffffff;border-bottom:1rpx solid #e5e5e5;padding:13px;text-align:center;
}
.city{position:absolute;left:0;top:0;}
.tabIndex-main{margin:0 auto;position:relative}
.tab1{border:1px solid #f85f48;text-align:center;padding:2px 15px;background-color:#f85f48;color:#ffffff;}
.tab2{border:1px solid #f85f48;text-align:center;padding:2px 15px;}
.search{position: absolute;width: 20px;height: 24px;right: 0;top: 0;/* display: -webkit-inline-box; */background-size: contain;background-repeat: no-repeat;background-image:url(图片链接太长，省略)
}

代码如下：

<div class="index-top">
<div class="tabIndex-main"> <div class="city">厦门</div><div class="tabIndex"><span class="tab1">问题</span><span class="tab2">答主</span></div><div class="search"><div></div>
</div>

HTML利用posotion属性定位小技巧相关推荐

固定定位小技巧（HTML、CSS）
固定定位小技巧(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset ...
一个ABAP调试器里查看类的静态属性的小技巧
我们知道,像如图一这种类的静态属性,因为不属于类的实例所有,因此调试到这个类的方法内部时,只能通过图二演示的两种方式在调试器显示该属性的值.而一旦调试到该类方法的外部,通常就只能通过"类名= ...
固定定位小技巧（固定到版心右侧）
小算法: 让固定定位的盒子left: 50%:走到浏览器可视区(也可以看作版心)的一半位置让固定定位的盒子margin-left: 版心宽度的一半距离:多走版心宽度的一半位置 <div cla ...
python 修改模板对象的属性_django小技巧之html模板中调用对象属性或对象的方法...
环境:依赖最初test2数据库 python3版本多python版本环境进入,python3虚拟环境,新建项目test4: ]# cd py3/django-test1/ ]# django-ad ...
textedit怎么插入数据_还在手动插入Excel交叉空白行？这个小技巧10秒搞定
导读:前几天有同学在后台提问,怎么快速在Excel中隔行插入一行或者多行空白行,其实在早期我们分享的小视频中有利用过类似的小技巧来制作工资条,今天我们用它来插入空白行. 文/ 芒种学院@指北针 Hel ...
ppt倒计时3分钟_这些出神入化的PPT小技巧，帮你轻松告别丑PPT！花3分钟看一看吧...
现在有很多小伙伴都会和PPT打交道,不过在PPT中还是有很多操作将很多人拦住了,做出来的PPT也是有点惨不忍睹了. 别担心,今天小编将分享几个非常实用的PPT小技巧给大家,帮大家轻松做出好看的PPT~ ...
css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
计算机使用技巧爆文,自媒体干货篇：利用这个小技巧可以五分钟之内写好一篇爆文！...
原标题:自媒体干货篇:利用这个小技巧可以五分钟之内写好一篇爆文! 上期给大家分享了如何拟写一篇文章的爆文标题,今天就跟大家分享,如何在五分钟之内写好一篇爆文!相信大家在写文章的时候,最让人头疼的就是为 ...
java怎么定位error_程序遇到错误定位一些小技巧
程序遇到错误定位一些小技巧前言:作为一个后端开发在写程序的过程中遇到错误然后一点点查找修改是痛苦的事情,开始会想:"我擦,明明写的是正确的为什么会错啊",然后被虐了一遍又一遍的时 ...

HTML利用posotion属性定位小技巧

HTML利用posotion属性定位小技巧相关推荐

最新文章

热门文章

HTML利用posotion属性定位 小技巧

HTML利用posotion属性定位 小技巧相关推荐

最新文章

热门文章

HTML利用posotion属性定位小技巧

HTML利用posotion属性定位小技巧相关推荐