div 隐藏_div的position属性

如果你想把div放到合适的位置,请看看这篇文章。

<!--

div的position属性

-->

<html>

<style>

.red

{

height:100px;

background:red;

}

.green

{

height:100px;

background:green;

position:relative;

left:50px;

top:50px;

}

.black

{

height:100px;

background:black;

}

</style>

<div class="red"></div>

<div class="green"></div>

<div class="black"></div>

</html>

position是位置,定位。

定位,要选择一个参考物。

比如我的左边,我就是参考物。是我的左边,不是别人的左边。

绿色相对于原来的位置做了偏移。红色,黑色不改变位置。

原来的位置,就是参考物。

偏移了多少呢?用left,top可以控制。

注意:left,top可以用正数,还可以用负数表示。

相对于原来的位置做调整。

top为负数,就是往上提

top为正数,就是往下移

left为正数,就是往右移

left为负数,就是往左移

正数和负数,表示两个相反的方向。

position属性的作用,就是可以把div块,放到任意你想放的位置。

快速实现定位。

position取值absolute

<!--

div的position属性

-->

<html>

<style>

.red

{

height:100px;

background:red;

}

.green

{

height:100px;

background:green;

position:absolute;

}

.black

{

height:100px;

background:black;

}

</style>

<div class="red"></div>

<div class="green">green</div>

<div class="black"></div>

</html>

参考物是浏览器左上角。

绿色div,他的top,left是相对于浏览器最左上角的偏移。

top,left可以设置为正数和负数,正数和负数代表方向相反。

绿色设置了absolute之后,黑色的位置也会发生变化。

position设置成了absolute,就会被下面的div上移覆盖。

实现了隐藏div的功能。也就是脱离了文档流。

参考网站:

CSS position 相对定位和绝对定位​www.runoob.com
5dce1cec1cad06fafb71344e2ac956c4.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/507401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

苹果笔记本python怎么换行_python怎么换行,我的换行就是执行啊

展开全部首先运行终端或者cmd命令行(windows下)。e69da5e887aa62616964757a686964616f31333433646338执行python3.5的命令。然后输入如下图所示的内容。这种换行方法也可以在编辑器中进行&#xff0c;这里以vim为例&#xff0c;输入与上图类似的代码&#xff0c;保存为t.py脚本…

Linux编程基础 7.3:套接字本地通信

1 socket本地通信 socket原本是为网络通讯设计的&#xff0c;但后来在socket框架的基础上发展出了一种IPC&#xff08;进程通信&#xff09;机制&#xff0c;即UNIX Domain Socket&#xff0c;专门用来实现使用socket实现的本地进程通信。 本地通信的流程与使用的接口与基于TC…

乔布斯在斯坦福大学演讲稿英文_西方大文豪最爱的10个英文单词,写尽人世间细腻情感!...

从小浸染在汉语中的我们&#xff0c;常被汉字的意象美震撼到&#xff0c;一字就是一世界。汉字有种无与伦比的美丽&#xff0c;寥寥数字就能营造“只可意会不可言传”的意境&#xff0c;很多人感慨英文就是一串拉丁字母&#xff0c;无法传递细腻的情感。比如很多人说像「缘分」…

dorado 刷新_dorado7常用内容

tabControl").set("currentTab","tab2");// 通过tab的索引(index)属性切换view.get("#tabControl").set("currentIndex",1);//根据名字切换tabvar tab self.get("currentTab").get("name");if(tab!"ta…

web前端开发论文写作_外语论文文献引言格式—MLA Style

我们之前讨论了外语论文文献引用格式—APA Style和Chicago Style—芝加哥论文脚注引注格式&#xff0c;今天我们来介绍在Essay写作中如何使用APA格式引用文献。MLA格式是英文论文写作最常用的一种参考文献格式。很多留学小伙伴都觉得MLA引用格式很复杂&#xff0c;今天译然小编…

Linux编程基础--目录

本系列教程以《Linux编程基础》为基础&#xff0c;希望在大家的帮助下&#xff0c;逐步完善Linux下系统级程序设计。 1 初识Linux 1.1 课程简介及Linux介绍 2 Linux文件操作 2.1 文件I/O 2.2 文件操作 3 进程管理 3.1 进程控制 3.2 exec家族 3.3 进程同步 4 信号 4.1 系…

100999凑整到万位进一_四年级数学专项练习

填空题1、当除数是34时&#xff0c;试商时可以把除数看作( )&#xff0c;这样初商容易偏( )。2、()个26相加的和是468&#xff1b;()比12个15多20。3、34&#xff1d;21……&#xff0c;余数最大是()&#xff0c;这时被除数是()。4、在括号里填上合适的数。480秒()分540厘米()分…

cosx等价无穷小_第一章 函数与极限 第七节 无穷小的比较

我的公众号“每日晴天”&#xff0c;可关注领取我的笔记pdf版哦~------------------------------------------------------------------------------本文主要首先把书上的定义和知识点总结起来&#xff0c;方便复习要点背诵&#xff0c;同时在最后分割线之后补充自己当时在学习…

Linux编程基础 8.1:多进程并发服务器

多进程并发服务器 多线程并发服务器 I/O多路转接服务器 epoll的工作模式 1 多进程并发服务器 在多进程并发服务器中&#xff0c;若有用户请求到达&#xff0c;服务器将会调用fork()函数&#xff0c;创建一个子进程&#xff0c;之后父进程将继续调用accept()&#xff0c;而子进…

pmbok第七版_PMBOK第七版要来了!都有哪些变化?你准备好了么?

PMBOK第7版#PMP##职场##项目管理##战略##价值#2020年1月15日PMBOK 第7版的征求意见稿发布&#xff0c;并于2020年1月14日结束意见征集&#xff0c;预计于今年第四季度发布。基于我的项目组合管理(PfMP)&#xff0c;项目集管理(PgMP),项目管理(PMP)的培训和研究经验&#xff0c;…

Linux编程基础 8.2:多线程并发服务器

2 多线程并发服务器 每个进程可打开的文件描述符数量有限&#xff0c;且进程占用资源较多&#xff0c;系统中进程的数量又受到内存大小的限制&#xff0c;为保证服务器效率&#xff0c;降低服务器消耗&#xff0c;可利用多线程机制搭建并发服务器。 【案例2】搭建多线程并发服…

简述python的特性_Python的特性概要

1、和C比较&#xff0c;Python是解释型的语言&#xff0c; 2、a>字节码特性 b>动态语义&#xff0c;即在赋值时才确定数据类型 c>缩进&#xff0c;点击tap键缩进四个空格&#xff0c;使用编译器是记得查看&#xff01;3、注意 写Python的时候首先要记得定义编码格式&a…

android netty导入_Android Netty框架的使用

public abstract class BaseClientMgr extends Subject implementsIClientConnect {protected boolean isRunning; //当前是否正在连接protected boolean isSending; //是否正在发送 线程是否被占用private int mPort; //连接服务器的端口号private int mCommunication; //通讯…

python自动化办公实例展示_python自动化办公?学这些就够用了

知乎上有人提问&#xff1a;用python进行办公自动化都需要学习什么知识呢&#xff1f;这可能是很多非IT职场人士面临的困惑&#xff0c;想把python用到工作中&#xff0c;却不知如何下手&#xff1f; python在自动化办公领域越来越受欢迎&#xff0c;批量处理简直是加班族的福音…

Linux编程基础 8.3:I/O多路转接服务器

1 简介 为进一步提升服务器效率&#xff0c;人们提出了一种被称为I/O多路转接的模型。其中“多路”指代连接到服务器的多个客户端程序&#xff0c;而“转接”则是指在服务器主线与各分支之间设置一个“岗位”&#xff0c;由该岗位实现监控多路连接中数据状态的功能&#xff0c…

handler原子锁_多线程编程之原子锁

在《多线程编程之数据访问互斥》一文中简单介绍了原子锁&#xff0c;这里再详细说一下原子锁的概念和用途。(1)简单数据操作如果在一个多线程环境下对某个变量进行简单数学运算或者逻辑运算&#xff0c;那么就应该使用原子锁操作。因为&#xff0c;使用临界区、互斥量等线程互斥…

python统计中文字符的个数_python统计中文字符数量的两种方法

方法一&#xff1a; def str_count(str): 找出字符串中的中英文、空格、数字、标点符号个数 count_en count_dg count_sp count_zh count_pu 0 for s in str: # 英文 if s in string.ascii_letters: count_en 1 # 数字 elif s.isdigit(): count_dg 1 # 空格 elif s.issp…

测井储层参数预测+人工智能方法

1 问题描述 测井储层参数预测 地层泥质含量&#xff1b;地层孔隙度&#xff08;POR&#xff09;&#xff1b;含水饱和度&#xff08;SW&#xff09;&#xff1b;渗透率&#xff08;PERM&#xff09;。 输入&#xff1a;声波时差&#xff08;AC&#xff09;、补偿中子&#x…

php spry文本域_Spry框架及验证构件

图9-71Spry框架原理虽然这些文件存放在服务器上&#xff0c;但实际上是被加载到浏览器中运行的。框架的用户将所有需要的文件链接到HTML文档中&#xff0c;以使用不同的组件&#xff0c;来获得更丰富的用户体验。Spry框架是和设计人员紧密相关的&#xff0c;因此框架中的每个元…

网络系统安全课程--目录

本系列教程以《网络与系统安全》为基础&#xff0c;希望在大家的帮助下&#xff0c;逐步完善网络与系统安全研究生课程。 1 经典攻击分析 1.1 中间人攻击 1.2 源替换攻击 1.3 消息重放攻击 1.4 平行会话攻击 1.5 反射攻击 1.6 交错攻击 1.7 类型缺陷攻击 1.8 身份标识省略导致…