HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图:

              

    以盒子中心为基准,为每条边的正方向,例:

      向右移动20px :  代码为left:20px;或者right:-20px;

      向下移动20px  :      代码为top:20px;或者bottom:-20px;

 

      

2 . 绝对定位:absolute

  以其第一个定位的祖辈级盒子为标准,定位祖辈级的中心方向为正,如下图:

    

3 . 固定定位fixed,是独立于body标签之外的,只以网页html为基准的,其定位方式与绝对定位相似.都是以中心方向为正方向.

  其宽度百分比也是只以html为基准的.

 

注:  1.如果没有对父级定位,绝对定位absolute则默认以其第一个定位的祖辈为标准.

  2.绝对定位和相对定位的盒子,其宽度百分比是以第一个定位祖辈为基准的;默认的是以body为基准的

  

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

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

相关文章

JMeter定制功能实现

JMeter提供了可在采样器中使用的功能。 在编写复杂的测试计划时,您会感到JMeter缺少某些方法。 您使用Beanshell脚本定义自己的自定义方法。 JMeter调用Beanshell解释器来运行脚本。 只要您不产生高负载(大量线程),此方法就可以正…

vue安装

1、查看版本 npm -v cnpm -v 升级 npm cnpm install npm -g 2、cnpm install vue 3、全局安装 vue-cli cnpm install --global vue-cli 4、创建一个基于webpack模板的新项目 vue init webpack my-project 5、运行项目 cd my-project cnpm install cnpm run dev 6、报错 解决办…

母函数

首先是4个重要的泰勒展开式 1. 2. 3.(e(-x)e(x))/21x^2/2!x^4/4!x^6/6!...... 4.(e(x)-e(-x))/2xx^3/3!x^5/5!x^7/7!...... 之后是两类母函数的应用 总体思路:利用(x^ax^bx^c)指数表示对某一物品取用的数量,系数表示方案数 1.普通…

如何在本地运行查看github上的开源项目

看中了一款很多星星的github的项目,想把这个项目拉到自己的电脑上运行查看项目效果,该怎么做?示例:我们今天要看的 github项目地址:https://github.com/lzxb/vue-cnode1.克隆项目: git clone [https://gith…

Spring JPA数据+休眠+ MySQL + Maven

在Spring MVC的帮助下开发Web应用程序意味着要创建几个逻辑架构层。 层之一是DAO(存储库)层。 它负责与数据库进行通信。 如果您至少开发了DAO层一次,则应该知道它涉及许多样板代码。 Spring Data本身就是与DAO相关的日常工作的一部分。 在帖…

关于DJANGO MODELS的个人理解和RELATED_NAME的使用

转自:http://www.cnblogs.com/blogofwyl/p/4283513.html作为一个新人(刚刚大学还没有毕业就出来实习,可以说是真的什么都不知到,什么都要重新学,但是这样真的可以锻炼自己的意志力和能力)。现在在公司是前端和后端一起坐&#xff…

015迭代器

注意迭代器和可迭代对象不同#迭代器&#xff1a;1、有iter方法&#xff0c;2、有next方法li[1,2,3,4,5]diter(li) # 等于li.__iter__()print(d) # <list_iteratorobjectat0x00000174316CC3C8>可以通过next方法取出元素。for循环就是这样的。for循环内部做的三件事1、调用…

CSS属性之attr()

attr()准确的说&#xff0c;不应该是一个属性&#xff0c;而是一个CSS的函数&#xff0c;我们先看看MDN上的介绍吧&#xff1a; Summary The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It c…

MySQL大小写敏感的解决方案

前言&#xff1a;对于MySQL的大小写敏感的影响&#xff0c;笔者在一个小项目中深刻的体会到&#xff1a;当想要查询一条数据时&#xff0c;总是出来两条或多条&#xff0c;后来发现是大小写敏感造成的原因&#xff0c;本文就该问题提出解决方案。 1.MySQL大小写敏感的控制 mysq…

利用border制作三角形原理

网站前端页面中&#xff0c;有时候会使用一些三角形&#xff0c;除了使用图片的方式之外&#xff0c;利用css的border属性也可以做出相对应的三角形。那么&#xff0c;利用border是如何实现三角形的制作的呢&#xff1f; 先看下面一个例子&#xff1a; CSS代码&#xff1a; w…

java weblogic 配置_java----weblogic部署应用

安装略创建域在部署过程中&#xff0c;不能用回退按钮&#xff0c;如果输入有误的话只能在该步设置完后重复进行设置。Linux命令和文件(夹)名是区分大小写的。1、进入weblogic的bin目录&#xff1a;#以具体安装目录为准cd /weblogic/Oracle/Middleware/Oracle_Home/wlserver/co…

sass 基础——回顾

1.webstorm 自动编译SASS  下载安装包 http://rubyinstaller.org/downloads/  然后点击安装&#xff0c;路径为默认路径就行&#xff0c; 勾选以下两项    add Ruby executables to your PATH    Associate .rb and rbw files with this Ruby information  安装完…

这么多年第一次自己去用游标和临时表

汗颜&#xff0c;做了这么多年开发自己第一次用游标和临时表 还是借助度娘才写出来的&#xff0c;请大家给指点下。。。 1 CREATE PROCEDURE [dbo].[sp_LaodDefaultFM]2 (3 ExhID int ,4 DefaultExhID INT,5 Result INT6 )7 AS 8 BEGIN 9 --判断当前会话中临时表是…

设置MongoDB副本集分为4个步骤

介绍 在详细介绍配置MongoDB副本集之前&#xff0c;让我简要介绍一下它们&#xff1a; 副本集是Mongodb数据库提供的功能&#xff0c;可实现高可用性和自动故障转移。 它是一种传统的主从配置&#xff0c;但具有自动故障转移功能。 基本上&#xff0c;它是mongod实例的组/集…

一篇文章搞定css3 3d效果

css3 3d学习心得 卡片反转魔方banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了。 首先先给大家看一个小例子&#xff1a; 卡片反转 这个例子只是简单的纯css3 3d 关于y轴旋转 下面是代码&#xff1a; 这是HT…

5个编码技巧以减少GC开销

在本文中&#xff0c;我们将介绍五种方法&#xff0c;这些方法可以使用有效的编码来帮助垃圾回收器减少分配和释放内存的CPU时间&#xff0c;并减少GC开销。 较长的GC通常会导致我们的代码在回收内存时被停止&#xff08;也称为“停止世界”&#xff09;。 一些背景 GC的建立…

java usb 无驱打印_Windows Usb 无驱动打印

\?\USB#VID_8866&PID_0100#0001B0000000#{a5dcbf10-6530-11d2-901f-00c04fb951ed}USB小票打印解决办法一、需要驱动&#xff0c;无需更改程序安装USB打印驱动&#xff0c;然后共享打印机&#xff0c;通过 “\\计算机\打印机名”的形式&#xff0c;按端口方式写。1二、直接…

需要学习的东西列表

1.Python2.webservice3.requirejs4.idea5.webService6.redis7.doubble8.mongDB9.zookper 大数据学习曲线&#xff1a;课程一、大数据运维之Linux基础课程二、大数据开发核心技术-Hadoop 2.x从入门到精通课程三、大数据开发核心技术-大数据仓库Hive精讲课程四、大数据协作框架-S…

微信小程序 引用其他js里的方法

微信小程序中&#xff0c;在微信官方开发文档我们可以知道 小程序的目录结构 。 一个小程序页面由四个文件组成&#xff0c;一个小程序页面的四个文件具有相同路径与文件名&#xff0c;由此我们可知一个小程序页面对应着一个跟页面同名的js文件。可是当有些公共方法&#xff0…

C++内存模型

C内存模型 一文了解所有C内存的问题 AlexCool 目录 一 C内存模型 二 C对象内存模型 三 C程序运行内存空间模型 四 C栈内存空间模型 五 C堆内存空间模型 六 C内存问题及常用的解决方法 七 C程序内存性能测试 环境&#xff1a; uname -a Linux alexfeng 3.19.0-15-generic #…