使用绝对定位后剩余元素被影响

2024-11-09

CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭

前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着不俗身世,但无形中会影响他人的凡人. 二.故事继续系列一中讲了浮动和绝对定位两位魔鬼兄弟之间的感人故事,那相对定位和绝对定位之间又有怎样的故事呢?//zxx:对微小说没有兴趣的可以直接跳到下一段话说那个CSS即将开启的时代,浮动和绝对定位的父亲“浮绝大魔王”因为过于强大,有碍和谐,于是其他神界属

【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8及firefox.chrome等不一致. 在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置.这点造成使用position:absolute进行层定

c# IList.ToList()后更改元素值会不会影响原列表的值

class ListTest { public static void Test() { #region 值类型 var oListVal = new List<int>() { ,,, }; ).ToList(); //由于T 是值类型的( int类型),所以新列表的元素与旧列表的元素各自被分配一个内存地址(栈内存) //更改新列表的元素,不影响旧列表元素 nListVal[] = ; ] == nListVal[]) { Console.WriteLine("值类型--已更改原

CSS使用position定位后导致元素浮动

1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolute; } </style> <div> <div style="width:100px;height:100px;background-color:red;"> </div> <div style="width:100px;h

当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> .fixed { position: fixed; left:0

绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位后margin: 0 auto;居中失效的解决方法</title> <style type=&q

并列 inline-block 元素互相影响问题

今天在做页面时发现一个很奇怪的问题:当两个设置了display: inline-block; 属性的元素并列排放时,它们的位置能够互相影响. 我们先来看看元素结构: <div class="container"> <div class="container-demo1"> <span>1</span> </div> <div class="container-demo2">

关于margin、padding 对内联元素的影响

内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响. 测试代码(在谷歌浏览器运行版本 49.0.2623.87 m,火狐效果同谷歌) <style type="text/css"> * { margin: 0; padding: 0; } body{ font-size: 12px; font-family: "微软雅黑&

当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: 根元素 (HTML), 绝对(absolute)定位或相对(relative)定位且z-index值不为"auto", 元素的opacity属性值小于1. (参考 the specification for opacity), 在mobile WebKit 和 Chrome 22+内核的

微信端页面使用-webkit-box和绝对定位时，元素上移的问题

-webkit-box 的用法通常,在移动端要实现水平方向平分宽度的布局,会使用 -webkit-box 来布局.它的使用方法是: <div class='parent'> <div class='child'></div> <div class='child'></div> <div class='child'></div> </div> .parent { display: -webkit-box; }

margin和padding对行内元素的影响

这个是在面试的时候,面试官问我的一个小问题自己没有考虑过inline元素设置margin和padding的问题学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) 比如你对一个a标签设置它的高度是没有效果的 2)HTML元素分为替换元素和非替换元素替换元素指的是作为其他的元素占位符的一个元素例如img 非替换元素指内容包含在文档中的元素 <p>hahaha</p>这个p就是一个非替换元素区分替换与非替换的方法:替换元素浏览器会根据标

绝对定位后a、button等hover状态样式不显示问题

<div class="operate"> <el-button>提交项目</el-button> <el-button type="primary">新建任务</el-button> </div> <el-tabs v-model="taskType" type="card"> <el-tab-pane label="常规任务

内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效解决方法

内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效解决方法:在position:relative的外层父容器加position:relative就可以搞定

CSS 绝对定位时，水平居中而不影响原文档中其它元素

div.absolutemiddle { position: absolute; left: 50%; transform: translate(-50%); /* 平移50%为自身尺寸的一半,实现水平居中 */ }

CSS子元素margin-top对于父元素的影响

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <style> *{ margin : 0; padding : 0; } body{ background : #eee; } .box1{ width : 100px; height : 100px; background : pink; } .box2{ width : 50px; height :50px

transform对定位元素的影响

1.温故知新 absolute:生成绝对定位的元素,相对于除position:static 定位以外的第一个有定位属性的父元素进行定位,若父元素没有定位属性则相对于浏览器窗口的左上角定位,定位的元素不再占据文档的空间. relative:生成相对定位的元素,相对于其正常位置进行定位,定位的元素仍然占据文档的空间; 2.发现问题 css// div { width: 150px; height: 150px; margin-left: 80px; background-color: #00aabb

float对内联元素和块元素的影响

写在前面:附一篇w3s的关于css float的讲解:http://www.w3school.com.cn/css/css_positioning_floating.asp float属性还没有彻底了解,因为遇到了float之后会导致width自适应最小化的问题,然后又偶然发现float的内联元素可以自己设置宽高,内外边距等属性了. 一.对于内联元素float之后的改变,找到的解释为:(链接:http://blog.csdn.net/forest_fire/article/details/509

margin折叠-从子元素margin-top影响父元素引出的问题

正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! html代码: <div id="fatherbox"> <div id="childbox">首页 </div> </div> css样式: #fatherbox{width:100%,height:64px;back

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

禁止COOKIE后对SESSION的影响

一.理解SESSION机制简单来说:每一个SESSION都有一个唯一的session_id , 默认情况下,session_id存储在客户端(默认COOKIE['PHPSESSID']), 在使用SESSION的时候会先从客户端读取相应的SESSION_ID,如果客户端禁止使用SESSION将不能按照默认的方式来使用SESSION 1.session.save_handler = files(这是php.ini中的一条配置) * 1 . session_start ()

IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug

尽管在项目中测试人员已经慢慢淡化了IE6的测试,但是IE7依然还是要纳入测试范围. 最近碰到一个IE7的蛋疼bug,在页面上设置了一个局部的滚动区域,在拖动滚动条的时候,滚动区域内设置了相对定位或绝对定位的元素不随滚动条移动位置. 蛋碎了一地... 在网上查了下看看大家都是怎么破这个问题的,发现这个问题居然也是个普遍问题,好吧. 解决方法: 如果 .scrollerArea{} 是滚动区域那么,在样式里面加上ie7的hack .scrollerArea{*position:relative;*

使用绝对定位后剩余元素被影响

热门专题