【css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））】的更多相关文章

css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））

借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的).绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块进行定位,不一定是其父元素. 参考:https://www.zhihu.com/que…

CSS概念 - 可视化格式模型（二） 定位概述（普通流、绝对定位）

2.定位概念 上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本的定位机制:普通流. 浮动.绝对定位. 除非专门指定, 否则所有框都在普通流中定位. 在普通流中元素框的位置由元素在HTML中的位置决定. p.h1或div等元素常被称为块级元素, 这意味着这些元素显示为一块内容, 即“块框”. 与之相反, a和span等元素被称为行内元素, 因为他们的内容显示在行…

fixed 相对于父容器定位

当一个元素设置为 fixed 或 absolute,不设置 top, left 则会在原位置,而脱离文档流,别的元素可以存在于它之后. 而当使用 fixed 后还想相对于父容器进行定位,或者说在当前位置进行位移,则可以通过设置 margin 值来修改元素的位置.…

H5弹性盒布局的使用（父容器属性）

为父容器添加display:flex/inline-flex 父容器可以使用的属性有: 1.flex-direction:决定主轴的方向 有四个属性值: row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿.…

CSS 盒子模型、RestCSS、浮动、定位

盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:border-color 边框宽度:border-width 边框样式:border-style 实线:solid 虚线:dashed 点线:dotted 双线:double 内边距:padding 上内边距:padding-top 下内边距:padding-bottom 左内边距:padding-le…

CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面布局过程中,浮动属性的使用频率是最高的.今天,就来带领大家一同认识这两个神奇的CSS属性. 承接文章:发挥个人的优势,踏踏实实的学习前端开发,为你传授学习心得 技术等级:初级 | 适合前端开发的初学者阅读学习. 一.浮动属性: CSS技术使用float属性来实现块级元素的浮动效果. web前端/ht…

CSS的布局之文档流，与行内/块级元素的延伸

文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> <form> <table> <p> ... ·行内元素 <span> <title> <strong> <input> <select> <img> <a> ... 此处延伸文档流中块级…

CSS子元素设置margin-top作用于父容器？

CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or n…

CSS清除浮动使父级元素展开的三个方法

点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 举个例子,有一个div容器,div容器里有两个小容器,分别向左和向右浮动,为了区别这三个容器,分别设置了不同颜色的边框. 复制代码 代码如下: <html> <h…

子元素浮动父容器高度不能自适应的CSS解决方法

百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F12查看发现,是因为子元素浮动了导致的,然后在父级元素加了clear:both好了. 所以查询了一下,浮动导致的问题.…

【CSS】div父容器根据子容器大小自适应

Div即父容器不根据内容自动调节高度,我们看下面的代码: <div id="main"> <div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto.在不同浏览器下还是不能完好的自动伸展.内容的高度比较高了,但容器main的高度还是不能撑开. 我们可以通过三种方法来解决这个问题. 一,增加一个清除浮动,让父容器知道高度.请注意,清除浮动的容器中有一…

CSS——fixed 固定定位相对于父容器

position:fixed 固定定位 用 left top 都是相对于浏览器的. 我今天想给网页做一个固定定位的导航 偶然间发现.可以用margin 相对于父容器定位. 小伙伴们可以试试. 不用left top  用margin-left 试试 -小收获…

使用CSS使内容垂直居中的N中方法。

使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论.   1.当待垂直居中的DIV高宽为已知时:   1.1绝对定位法:   CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:rel…

css 使元素居中

css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显示</div> 2.定宽块状元素水平居中 <div style="width:200px;margin:20px auto;";>居中显示</div> 注:对于以上情况可以灵活应用 可以将元素设置 display:inline ,将其变为行内元素,再按照…

详细讲解CSS中相对定位relative和绝对定位absolute

很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性, 可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称…

关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

   html css <div class="register-wrapper"> <div class="register"> <h1><span class="icons icons-home"></span>XXX网站首页!</h1> <div class="register-links-wrapper"> <ul class=&…

移动端框架篇-控制父容器的滑屏框架-slip.js

设计滑屏框架的办法一般有2种 控制父容器法 控制子容器法 这个算是控制父容器法 通过控制父容器的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的取值为当前页面高度~ 这里采用slip框架,库大小5.75K,非常轻量,可以放心用在你的项目~ slip框架的页面样式需要自定义,不过这里我简单写好了~ (如果你不使用框架,推荐用transform: translate(X,Y)的写法,首先transform: translate可设计高性能动画,…

CSS position绝对定位absolute relative

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对…

IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间的问题探讨

IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; overflow: auto; background-color: #f00; } .inner{ width: 250px; background-color: #ff0; } </style> <div class="panel"> <div class=&qu…

父容器的flowover:hidden 必须配合父容器的宽高height width才能生效

有时候 给父容器 加上了 flowover:hidden 这个css后, 其中的子元素为什么仍然会跑出来? 解决的根本方法就是要给 父容器 加上具体的一个宽度, 或高度. (而这个宽度和高度, 其实你一般 随意的, 比较合理的 如:width: 1000px;等 就可以了, 不必刻意 的 去考虑屏幕的宽度等, 只要你不给div父容器加上边框或背景颜色等就无所谓) 为什么? 因为: div相当于一个 柔软的, 可以伸缩的 布袋子, 它可以很小, 小到无形, 小到没有, 小到 为0. 也可以很大,…

css使 同一行内的 文字和图片 垂直居中对齐?

设置父容器, 使 父容器 div 下的所有元素 都 垂直对齐: father-container *{ vertical-align:middle 找回密码…

深入理解CSS绝对定位absolute

前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高.应用场景更广泛.本文将介绍使用绝对定位时的具体细节 定义 当元素绝对定位时,会从文档流中完全删除.元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于初始包含块document,其边界根据偏移属性放置.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框.定位元素不会流入其他元素的内容,反之亦然. [注意]如果文档可滚动,绝…

Spring - 父容器与子容器

一.Spring容器(父容器) 1.Mapper代理对象 2.Service对象 二.Springmvc(前端控制器)(子容器)        Controller对象 1.标准的配置是这样的:Controller只在SpringMVC的配置文件扫描.Service等只在Spring容器的配置文件配置扫描.        2.Spring中也可以扫描Controller,但是使用时还是使用的SpringMVC自己的(自己没有配置,那么不能用),造成对象冗余,而且使用时事务控制可能有问题.   …

html+css使图片在页面中循环滚动

我们先通过html创建一个div盒子的框架,方便后续以及实际使用中调整位置. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动播放</title> </head> <body> <div> <img class="c1" src="img/banner_3.jpg&qu…

winform子容器随父容器的变化设置

在设计winform窗体时,因为会很少去调整窗体的大小,这时子控件就会出很尴尬的情况, 通过查看空间的属性,发现有这样两个属性,dock和anchor.这里主要说anchor,官方 解释没太看懂,我的理解是设置那个边框与窗体的固定距离不变,它给出的值是标志枚举, 所以可以通过或(|)运算来同时设置多个值,如果设置上下左右都固定不变,则不管窗体怎 么变,子容器都能适应.这里就像是移动web的设置,通过百分比来的设置控件的大小,那 么子容器就会跟随父容器的变化而相对变化. initPicBox.An…

.NET同一个页面父容器与子容器通信方案

主界面: 关键主页面代码: <div id="EditDiv"> <iframe src="javascript:void(0)" id="editFrame" width="100%" height="100%" frameborder="0"></iframe> </div> ---------------以下js脚本(关键代码)---…

css使既有浮动又有左右margin的多个元素两端对其

两端对齐效果 如上图中红色的9个div它们中间有间距,而最左边和最右边是没有间距的,这种布局如果使用css3的flex来实现是非常简单的,而如果要使用float布局就需要一些特殊的技巧了. 实现原理 红色的9个div左浮动,左右margin为25px,父容器左右margin为-25px,这样相当于是把父容器拉长了,因此就达到了两端对齐的效果.Bootstrap的栅格系统就是这么干的,bootstrap要求我们.col-xx-xx的父容器需要为.row,而.row的左右padding就为-15px…

CSS绝对定位absolute详解

转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解浮动float,对理解绝对定位absolute会大有帮助. 先说absolute和float的相似处:包裹性 和 高度欺骗 包裹性 所谓一图胜千言(唯一的区别是:下图的div增加了absolute)       <div style="border:4px solid blue;"&…

父容器利用opacity设置透明后，子元素跟着变透明的解决方案

背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从0到1,表示透明程度.…

父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;…