css元素定位

<style type="text/css">

body{

    margin: 15px;

    font-family: "Adobe 宋体 Std L";

    font-size:12px;

}

.father{

    background-color: black;

    border: 1px solid #111111;

    padding: 25px;

}

.son{

    padding: 10px;

    margin:5px;

    background-color: aliceblue;

    border:1px dashed;

    float:left;

}

.son2{

    padding: 5px;

    margin: 0px;

    background-color: #111111;

    border:1px dashed #111111;

}

</style>

<style type="text/css">

body{

    margin: 5px;

    font-family: "Adobe 宋体 Std L";

    font-size: 13px;

}

.block1{

    padding-left:10px;<!--列距-->

    margin-right:10px;

    float:left;<!--浮动在左边上层-->

}

.h3{

    background-color: aliceblue;;

    border: 1px dashed #233333;

    clear:left;<!--清除浮动-->

}

</style>

<style type="text/css">

#block{

    background-color: ];

    border:1px dashed #000000;

    padding: 10px;

    position:absolute;<!--绝对定位，脱离了父标签-->

    <!--position:relative<!--相对于自身原来的距离，在父块-->

    left:20px;<!--相对于页面body的距离-->

    top:40px;

}

</style>

<body>

<div id = "father">

    <div id = "block">absolute</div>

    <div id = "block1">relative</div>

</div>

</body>

z-index调整定位时重叠块的上下而为之，当块设置了position属性时，该值便可设置各块之间的重叠高低关系，默认值为0

<style type="text/css">

#block1{

    ... position: absolute;

    left: 20px;

    top:20px;

    z-index: 1;<!--高低值-->

}

#block2{

    ... position: absolute;

    left:10px;

    top:23px;

    z-index: 0;<!--高低值0-->

}

</style>

 

复习-css元素定位的更多相关文章

  1. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  2. 【WEB自动化】【第一节】【Xpath和CSS元素定位】

    目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...

  3. CSS元素定位6-10课

    <精通CSS.DIV网页样式与布局>视频6-10课总结图: 元素定位 (1)float:left/right; 左浮动:脱离普通文档流向左浮动(即向左对齐):float属性必须应用在块级元 ...

  4. CSS元素定位

    使用 CSS 选择器定位元素 CSS可以通过元素的id.class.标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如: #su       ...

  5. css元素定位样式

    曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论. css 定位: positionstatic : 默认静止定位,元素在正 ...

  6. css选择器用法，使用css定位元素，css和xpath元素定位的区别

    css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...

  7. html 元素定位position-relative, absolute, fixed, static

    看到这个,你有什么想法? Difference between static and relative positioning 如果你能完全看明白,那几本上css 元素定位的东西基本都会了.本文也不用 ...

  8. python3+selenium3自动化1——元素定位

    1.selenium的webdriver提供了八种基本的元素定位方法 打开浏览器 driver = webdriver.Chrome() driver.get('https://www.baidu.c ...

  9. css元素position定位和z-index

    网页元素定位 1.注意点: 1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高.此时最好通过padding等来控制高度. 2)对于同一个元素,不要讲float ...

随机推荐

  1. K8s(2)-部署应用

    一旦运行了Kubernetes集群,就可以在其上部署容器化应用程序.为此,您需要创建Kubernetes Deployment配置.Deployment指示Kubernetes如何创建和更新应用程序的 ...

  2. iowait

    https://www.cnblogs.com/fuyuanming/articles/6497005.html

  3. 线程的定时器Timer

    定时器的作用就是多少秒之后开启一个线程. from threading import Timer def func(): print('函数执行了') Timer(2, func).start() 注 ...

  4. windows修改PowerShell（命令提示符）默认中文编码方式

    如果以下方法都没有作用的话,可以直接在代码中调用<stdlib.h>中的system("mode con cp select=65001")或者是system(&quo ...

  5. windows环境下Oracle数据库冷备份和恢复

    1.点击开始菜单的“运行”,输入sqlplus/nolog 2.在弹出的命令行窗口以sysdba身份登陆,要输入:系统用户名/登陆密码@数据库实例名,如sys/testora@orcl 3.输入 al ...

  6. ELK之elasticsearch导致CPU居高不下系统慢解决办法

    参考:http://zoufeng.net/2018/07/16/cpu-of-elasticsearch-high-search-slow/ elasticsearch主机CPU居高不下100%左右 ...

  7. CodeForces 733B Parade

    B. Parade time limit per test1 second memory limit per test256 megabytes inputstandard input outputs ...

  8. Golang自定义包导入

    # 文件Tree project -/bin -/pkg -/src -main.go -/test -test1.go -test2.go main.go package main import ( ...

  9. arcmap发布服务报错：“Faild to publish service”

    发布gp服务时,Analyze没有重大错误,但是发布结束时提示"Faild to publish service".让人很懵逼: 解决方法: 打开arcgis server man ...

  10. 图->最短路径->单源最短路径(迪杰斯特拉算法Dijkstra)

    文字描述 引言:如下图一个交通系统,从A城到B城,有些旅客可能关心途中中转次数最少的路线,有些旅客更关心的是节省交通费用,而对于司机,里程和速度则是更感兴趣的信息.上面这些问题,都可以转化为求图中,两 ...