前端CSS五中元素定位类型
元素想通过底部、顶部、左侧、右侧属性定位是必须先设定position的属性值
posistion属性的五个值：static、relative、fixed、absoulte、sticky
- static定位
- HTML的默认定位，正常文档流对象
- 不受top、bottom、left、right的影响
- relative定位
- 相对定位元素的定位是 相对其正常位置
- 即移动相对定位元素，它原本所占的空间不会改变
- 相对定位元素经常被用来作为定位元素的容器块
h2.pos_left
{
position:relative;
left:-20px;
background-color:red;
} h2.pos_right
{
position:relative;
left:20px;
background-color:blue;
}
- fixed定位
- 元素的位置是相对于 浏览器窗口 是固定位置
- 与文档流无关，因此不占据空间
- fixed定位的元素和其他元素重叠
div.fixed{
position: fixed;
border: 3px solid #73AD21;
right:20px;
bottom:20px;
top:20px;
}
注意看代码的样式设置，fixed相对于top，与botton同时设置的话，div会被撑开
- absolute定位
绝对定位的元素相对于最近的已定位元素，如果元素没有已定位的父元素，那么他的位置相对于<html>
- 与文档流无关，不占据空间
- absolute定位的元素和其他元素重叠
- sticky定位
- 粘贴定位
- 基于用户的滚动位置来定位
- 依赖于用户的滚动，在position：relative与position：fixed定位之间切换
- 在页面滚动目标区域内它的行为类似于relative，超出目标区域则像fixed，固定在目标位置
- 指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
前端CSS五中元素定位类型的更多相关文章
- 前端CSS浮动、定位、溢出、z-index、透明度
一.浮动float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的 ...
- css中元素定位
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...
- Web前端 css实现元素垂直居中的常用方法
方法1:table-cell html结构: 1 2 3 <div class="box box1"> <span>垂直居中</spa ...
- Selenium3+webdriver学习笔记4（css方式元素定位）
#!/usr/bin/env python# -*- coding:utf-8 -*- from selenium import webdriver import time,os # about:ad ...
- 前端css 同级元素 设置不同样式 :first-child :nth-child() 的操作收藏
说明:最近在写前端vue 调样式的时候遇到了一个问题 同一个div下对多个同级别的<span>标签进行 边距设置 <div class="shuju-div"& ...
- 【WEB自动化】【第一节】【Xpath和CSS元素定位】
目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...
- Web前端面试指导(十)：元素定位有哪些？
本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...
- Java + selenium 元素定位（4）之By CSS
这篇我要介绍元素定位的倒数第二个方法啦,就是基于CSS的元素定位.关于一些CSS的知识,我这里就不累赘的讲了,以后可能会单独写一篇关于CSS的介绍.当然个人推荐如果之前完全没有CSS只是储备的,可以选 ...
- Web自动化必会知识：「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」
1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?
本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计,O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改操作. 在流程表单设计界面, ...
- 简约版八股文（day1）
Java基础 面向对象的三大基本特征 封装:将一些数据和对这些数据的操作封装在一起,形成一个独立的实体.隐藏内部的操作细节,并向外提供一些接口,来暴露对象的功能. 继承:继承是指子类继承父类,子类获得 ...
- CF1794B Not Dividing题解
如果 \(a_i\) 可以整除 \(a_{i - 1}\),只要在 \(a_i\) 上 \(+1\) 即可,这样 \(a_i \bmod a_{i - 1} = 1\) 就满足题目要求了,如果这样算来 ...
- 【JavaScript】你真的熟悉bind吗
引言 内容速递 看了本文您能了解到的知识! 在本篇文章中,将带你了解什么是bind,bind的用途.如何手写bind以及工作中实际使用bind的场景. 在JavaScript中,bind()方法是用来 ...
- shell: xscp
#!/bin/bash ips=( 1.1.1.1 1.1.1.2 ) user= passwd= for i in ${ips[@]} do echo "== $i ==" ss ...
- 如何配置Linux的yum源
一.配置本地yum源 1.挂载光盘 a.建目录 #mkdir /media/cdrom b.挂载光盘 #mount /media/sr0 /media/cdrom c.挂载本地iso文件 #mount ...
- Numpy，一篇足以
numpy 用于数值计算 ndarray, 一个有效的多维数组,能提供以数组为导向的快速数值计算和灵活的广播功能(broadcasting) 便利的数学函数 用于读取/写入(reading/writi ...
- .NET Core多线程 (1) Thread与Task
去年换工作时系统复习了一下.NET Core多线程相关专题,学习了一线码农老哥的<.NET 5多线程编程实战>课程,我将复习的知识进行了总结形成本专题.同时也特别推荐有兴趣的读者去学习一线 ...
- [Go笔记] 基础-01: Golang发展简史、著名项目及基本使用
引言 Golang,又称Go语言,是一门开源的静态类型编译型编程语言.自从2007年由谷歌的罗伯特·格里泽默(Robert Griesemer).罗布·派克(Rob Pike)和肯·汤普森(Ken T ...
- 一个可将执行文件打包成Windows服务的.Net开源工具
Windows服务一种在后台持续运行的程序,它可以在系统启动时自动启动,并在后台执行特定的任务,例如监视文件系统.管理硬件设备.执行定时任务等. 今天推荐一个可将执行文件打包成Windows 服务的工 ...