如何让绝对定位不以浏览器为基准

2024-09-06

如何让position fixed不再基于浏览器窗口定位

position:fixed默认是相对浏览器定位的. 就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: MDN对position: fixed有一个注释: 当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先. 也就是说如果想让fixed不相对浏览器定位,只要给它的随便哪个祖先设上非none的transform,问题就解决了.这祖先可以是static的,也就是说随便哪个祖先都行.比如说给body设一个transform: translateZ(0);,

记录-div绝对定位针对手机浏览器的区别

最近搞个wap ,有一个需求就是一些文字描述定位到一张图片上的某个地方,按照以往的方式直接通过定位div position: absolute; PC chrome 模拟手机显示没问题! 但是,在ipad和安卓平板做测试,发现文字描述并没有定位打图片中,发现消失呢! 研究了好久,发现是代码的位置问题. 修改前: <figure> <a href="default.htm"><img src="css/images/banner1.jpg"

div绝对定位针对手机浏览器的区别

最近在对ipad和安卓平板做测试,发现我自己写的一个下拉控件在安卓浏览器里面被遮盖了,但是PC或者ipad都没有这个现象,一开始以为是z-index 可是无论我调多少都没有用,研究了好久,发现是代码的位置问题首先我们看下效果图在电脑上我用的是IE 在安卓浏览器我用的是QQ浏览器(HD) 可以发现,安卓上面被遮挡了原因就是我把mydiv1放在外层inputdiv_1的里面代码: <div id="inputdiv_1"> <input id="pric

web前端学习笔记(CSS盒子的定位)

相对定位使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定.以下为后面实验的基准代码. <html xmlns="http://www.w3.org/1999/xhtml

web前端学习笔记

web前端学习笔记(CSS盒子的定位) 相对定位使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定.以下为后面实验的基准代码. <html xmlns="http://w

css中字体大小在不同浏览器兼容性问题

css中使用font-size设定字体大小,不同浏览器的字体height一样,但是width不同,比如在火狐和谷歌中,font-size:20px,字体的高度变为20px,但是谷歌的字体宽度比火狐长一,解决方法如下: 1. 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px —— 为了计算方便.然后在 body上应用 font-size: 2rem;,那么现在body的字体大小就是 20px. html { font-size: 62.5%; } body

CSS学习笔记

CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u5B8B%u4F53" 就是\5B8B\4F53 font-family: 中文,英文,最好的是unicode编码 eg. font-family: "SimSun","SimHei",sans-serif; 字体名称英文名称 Unicode 编码宋体 S

HTML设计模式学习笔记

本周我主要学习了HTML的设计模式,现将我的学习内容总结如下: 一．盒模型的学习 CSS中有一种基础的设计模型叫做盒模型,它定义了元素是如何被看做盒子来解析的.我主要学习了六种盒模型,分别为内联盒模型(inline box),内联块状盒模型(inline-block box),块状盒模型(block box),表格盒模型(table box),绝对定位盒模型(absolute box)和浮动定位盒模型(floated box). 盒模型设计模式是CSS中内建的,它定义了如下属性之间的关系:边界.

CSS中定位机制的想法

对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | fixed 适用于:除 <' display '> 属性定义为「table-column-group | table-column」之外的所有元素. 继承性:无. 归类总结一下定位的四种属性特点: 绝对定位: 1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的. 2:盒子嵌套的时候,如果父

定位--position属性

一.定位--position属性 1.static:默认值没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) 3.absolute:绝对定位 4.fixed:固定定位二.相对定位元素的规律 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响三.绝对定位-- absolute属性 1.偏移位置:left right t

深度理解div+css布局嵌套盒子

1. 网页布局概述网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位. 2. 盒子模型盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

WEB入门.六盒子模型

学习内容 CSS盒子模型盒子之间的关系页面元素定位能力目标理解盒子模型理解内容与表现分离的优点理解并掌握盒子之间的关系理解并掌握绝对定位与相对定位的用法本章简介上一章节中已经讲解了页面布局的基础知识,了解了设计一个标准的 XHTML页面需要遵循的规范,例如:标签需要关闭.使用 id 属性代替 name 属性.属性值需要使用双引号等.另外,上一章内容讲解了 XHTML 基本标签的用法. 页面是 Web 站点与用户交互的接口,它能够引起用户对 Web 的兴趣并且加入自己电脑的收藏夹

css四种定位

概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性描述 top: 顶端偏移,定义元素相对于其父元素上边线的距离 bottom: 底部偏移,定义元素相对于其父元素下边线的距离 left: 左侧偏移,定义元素相对于其父元素左边线的距离 right: 右侧偏移,定义元素相对于其父元素右边线的距离定位模式的分类值描述 static 自动定位(默认定位方式) relative 相对定位,相

第六天-css基础（css定位)

css定位方位名称: left right top bottom position:absolute 绝对定位(脱离标准流 div{ width:100px; height:100px; bacround-color:black; position:absolute; left: } 特点:1.当给一个单独的元素设置绝对定位,以浏览器左上角为基准设置定位的 2.当盒子发生嵌套关系的时候,如果父盒子没有设置定位,子盒子设置定位,定位的盒子会已浏览器左上角为基准设置定位.

position的用法（top, bottom, left, right 四个定位属性配合进行使用）

一般情况下页面元素的定位方式是根据文档流也就是说默认的从上到下,从左到右的方式进行排列的,而将元素从文档流脱离出来显示的方式有两种,一种是 position 定位另一种是float 浮动,这里我们详细介绍下position的用法. position 常用的四种属性: 1 static(默认属性) 2 relative(相对属性) 3 fixed(固定属性)4 (absolute 绝对属性) position四种属性的用法: static(默认属性): 这个没什么好说的就是将就是将定位方式

走在深夜的小码农 Seventh Day

Css3 Seventh Day writer:late at night codepeasant 学习大纲: 1. 定位(position) 介绍 1.1 为什么使用定位我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果? 场景1: 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子. 场景2:当我们滚动窗口的时候,盒子是固定屏幕某个位置的. 结论:要实现以上效果,标准流或浮动都无法快速实现所以: 1.浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒

CSS基础-4 定位

CSS定位和浮动 css定位:改变页面的位置定位机制有以下三种普通流浮动绝对布局定位的属性: position:把元素放在一个静态的.相对的.绝对的.或固定的位置中 top 元素向上偏移 left 元素向左偏移 right 元素向右偏移 bottom 元素向下偏移 overflow 设置元素溢出其区域发生的事情 clip 设置元素的显示的形状 vertica

HTML＆CSS日常知识点总结

HTML 标签 meta 标签永远位于文档的头部,即head元素内部可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码如果外部文件中的字符编码与主文件中的编码方式不同,就要用到charset属性默认的字符编码是 ISO-8859-1 标记了一个段落 p元素会自动在其前后创建一些空白.浏览器会自动添加这些空间 input 用于搜集用户信息 // 规定input元素的值 <input value="请输入姓名...&

html和css

html css 和js说明 1.什么是html? HTML(HyperText MarkUp Language)超文本标记语言,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析,然后把结果显示在网页上,通俗的讲它就是服务器发送的字符串到浏览器,通过浏览器能解析的规则用HTML来描述, 它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础 HTML语言是一种标记语言,不需要在服务端编译,直接由浏览器解释执行 HTML文件是一个文本文件,包含了HTM

AmazeUI 框架知识点－布局和样式整理

1.Amaze UI 将所有元素的盒模型设置为 border-box.这下好了,妈妈再也不用担心没计算好 padding.border 而使布局破相了. 2.Amaze UI 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px -- 为了计算方便.然后在body 上应用了 font-size: 1.6rem;,将页面字号设置为 16px. 3.<h1> - <h6> 保持粗体,设置了边距:<h1> 为正常字号的 1.5 倍:<h2

HTML5的实用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ffffff } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #eb905a } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color

如何让绝对定位不以浏览器为基准

热门专题