用absolute实现fix效果

2024-08-02

CSS属性之absolute

0.脱离标准文档流绝对定位的元素会脱离标准文档流,拥有z-index属性,并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素,这里就不过多介绍. 不过值得注意的是,虽然绝对定位元素脱离的标准文档流,但是它依然会受到父元素影响哦,比如line-height和text-align属性等. 1.跟随性绝对定位的元素脱离标准文档流之后,并不是跑到了任意的位置,而是跟在前一个没有添加absolute或者fixed值的元素后面或者下面. 不过在设置了left/top/bottom/right这些

解决CSS的position:absolute中left效果

有时候css中设置了position:absolute,left:100px,但是如果我们不想要这个left怎么办呢,当然你直接删除就可以,但是如果是框架的css,你直接删除就有问题了,这时候该怎么办呢?解决办法很简单,你只要再定义一个class然后设置 left:auto就可以,是不是很简单,你现在就可以试试!!!

css之absolute

一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似(看下面的demo,如果图片在左上角,那么用float和absolute都一样) <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width">

关于浮动float属性和position:absolute属性的区别

最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁,成为一个普普通通的人.比如下面这个例子如图,我们为第一个盒子第一个盒子设置了float:left属性,他也就失去了霸道总裁独占一行的特点,下面的盒子就上位. 但是我们发现一个问题,如果总裁通知完全浮动(也就是说不在公司了),那么下面的div应该把他的位置完全占领,也就是说文字也应该被总裁覆盖,但是

absolute和relative元素设置百分比宽高的差异

一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时,却是不同的结果. demo 用如下小demo测试: <aside class="container"> <div class="test"> </div> </aside> .container{ position: r

通过案例理解position:relative和position:absolute

w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:absolute困扰了我快一个星期之久,网上找到的资料鱼龙混杂,刚确定“这样”的理解之后,看另一份资料,发现“这样”理解是错了,就这样不断更正,并记录下来,最终整理出这份,以备参阅. 若有错误,请指正. 下面的结果都是基于firefox38版本来测试的. position:relative相对定位 1. 如

CSS--position:relative和position:absolute

position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认位置.(在父级节点的content-box区定位,父级节点有文字的话,元素的默认位置则是紧随文字)2. 不会改变行内元素的display属性.3. 并没有脱离普通流,只是视觉上发生的偏移.代码—— <body style='margin:0;padding:0;background:#BDD7EE;

CSS 相对|绝对(relative/absolute)定位系列（一）

一.有话要说以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑到:1. 琐碎的俗称tip的东西不少,如何寻找主线串联:2. 不少自己“非主流”的破常规的观点,如何一句话提炼,如何清晰表述,如何让人易于理解:3. relative/absolute/z-index本身关系暧昧非比寻常,如何有重点的叙述,同时又不扯断他们之间的牵连:4. 又要拿一些大网站说事,如何

html5--6-33 CSS定位是什么

html5--6-33 CSS定位是什么一.总结一句话总结: 1.常规文档流是一套体系,浮动是另外一套体系. 2.标签清除浮动之后会跑到常规文档流它本来的地方. 3.浮动是否占据常规文档流:应该不占. 4.相对定位占据文档流,绝对定位不占据文档流. 5.CSS 有三种基本的定位机制:普通流.浮动和绝对定位(两种:absolute和fix) 1.css中vertical-align属性可用于表格么? 解答:可以. 2.css中垂直居中怎么设置? 解答:在style中,vertical-alig

前端进阶试题（css部分）

一.css 40分 1. 什么是盒模型? 答: 2. Doctype的几种类型? 答:①.过渡的:②.严格的:③.框架的更多详细介绍参考:资料 3. 如何布局左不动右边自适应的两列布局? 答:两种简单的方法:position:absolute;和float: left; 两种效果是一样的,代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

React Native之 ScrollView介绍和使用

前言学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢文章第一版出自简书,如果出现图片或页面显示问题,烦请转至简书查看也希望喜欢的朋友可以点赞,谢谢 ScrollView组件介绍与简单使用 React Native中的 ScrollView 的组件除了包装滚动平台,还集成了触

重温Bootstrap

预热 ★ 学习要点 1. 理解其GridSystem(栅格排版): 2. 熟悉其所提供的各种CSS样式及显示效果: 3. 知道提供了哪些直接可用的UI组件,以及如何使用JavaScript去调整其交互特性: ★ 引用注意点 (1) 在<head>部分需要添加bootstrap所使用的样式表文件: (2) BOOtstrap使用jQuery,因此需要在引用Bootstrap的JavaScript文件前,先引入jQuery的JavaScript文件页面布局 ♣ Boostrap的"网格

position：fixed 属性在iphone 中不起作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css知多少（10）——display

1. 引言网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”).在本系列一开始讲<浏览器默认样式>的时候,大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”(剩下的就是“流”).这部分知识非常重要也非常基础,因此在所有的前端面试题中,都会问道哪些元素是“块”哪些元素是“流”. 其实,这部分知识都囊括在display这个样式设置中.在网上查找出display所有的属性,你会发现它有很多,但是不是每个都常用,甚至大部分你都没有用过.

css的核心内容标准流、盒子模型、浮动、定位等分析

1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换成块级元素: 标准流:就是标签的排列方式.<div class="style2">我的未来不是梦</div><span id="st" class="style1">栏目一</span><span

JS实现元素拖动

实现1 参考文献:http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html 1.1 拖放效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(00

css learn

float: 1.margin属性本身与float无关.写不写float都可以margin. 2.top,right,bottom,left和z-index都无法使用. 3.父元素浮动,子元素在其中仍然是文档流. position:relative 自己原先的位置处于文档流中,然后其元素却通过设置top,right,bottom,left来定位.absolute 和fix也是如此.static会使子元素继承父元素的属性. margin:如果设置了百分数,是相对于父元素的宽度而设的. 元素居中:

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

CSS知识点补充

一.css框模型概述元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素 1.css内边距属性(padding) 定义元素边框与元素内容之间的空白区域 2.css外边距属性(margin) margin 可以设置为 auto.margin后面是有4个参数的.例如:margin:1px 1px 1px 1px.分别表示上.右.下.左.如果只写2个参数的话,比如:margin:1px 2

巧妙的Jq仿QQ游戏导航界面学习

先贴上源代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>仿腾讯游戏首页小幻灯片jquery插件</title> <style> img{border:0px;font-size:0;} .banner{position:relative;width:960px;height:170px;overflow:hidden;marg

用absolute实现fix效果

热门专题