精华内容
下载资源
问答
  • 今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出。百度后,才想起来... ...position后,元素已经和父元素不在一个流里面了,而overflow只能对在同一流中的元素起...

    今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出。

    百度后,才想起来... ...

    position后,元素已经和父元素不在一个流里面了,而overflow只能对在同一流中的元素起作用。

    简单说,

    就是 table 已经是移民火星了,而table外面的div 依然还在地球,那么身在地球的div自然是管不了身在火星的table咯。

    所以解决办法,

    既然table移民了,那么它爹div也跟着移个民不就可以管着table了吗?

    当子元素改变当前流后,父元素也跟着改变当前流,那么overflow就可以生效了。

    下面引用一个例子:

    .box{

    width:200px;

    height:150px;

    overflow:hidden;

    border:2px solid #000;

    float:left;

    margin-right:20px;

    }

    .relative{

    position:relative;

    }

    .div{

    width:200px;

    height:100px;

    background:#FF5400;

    margin-top:100px;

    position:absolute;

    }

    .zi{

    width:200px;

    height:300px;

    background:#FF0000;

    }

    高300px的子元素溢出隐藏

    不带relative

    带上relative

    效果图:

    20d00f7e5ba964e47a6c72a9715b7e8b.png

    请原谅我懒的自己写demo。借下别人的demo用用。

    绝对定位常见误区:position:absolute相对于谁定位、及当溢出时怎么隐藏

    1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于pos ...

    position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

    解决绝对定位div position: absolute 后面的<a> Link不能点击

    今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...

    position absolute 绝对定位 设置问题

    今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

    定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

    position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

    css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

    【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

    关于position:absolute的困惑

    今天在学习时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...

    随机推荐

    【转载】C/C++之回调函数

    [转载地址]:http://www.cnblogs.com/chenyuming507950417/archive/2012/01/02/2310114.html 在理解“回调函数”之前,首先讨论下函 ...

    很久之前写的Ajax库

    很久之前写的一个小型AJAX的js,放在上面以免以后想玩了找不到了. // version : 0.1 beta // author : __Ajax function __Ajax(url,opti ...

    HDU 2647 Reward(图论-拓扑排序)

    Reward Problem Description Dandelion's uncle is a boss of a factory. As the spring festival is comin ...

    MySQL数据库优化_limit_1

    转自:https://blog.csdn.net/cbjcry/article/details/70155118 1. MySQL中,在某些情况下,如果明知道查询结果只有一个,SQL语句中使用LIMI ...

    移动端 meta 必备

    将页面宽度到跟手机宽度比例相同,在手机上不能用手缩放

    展开全文
  • #box{ height: 2000px;... position: absolute; top: 0; left: 0; height: 30px; background-color: red; } .root{ height: 530px; overflow: auto; } ...
                #box{
    				height: 2000px;
    				background-color: #008B8B;
    			}
    			.wrap{
    				width: 100%;
    				position: absolute;
    				top: 0;
    				left: 0;
    				height: 30px;
    				background-color: red;
    			}
    			.root{
    				height: 530px;
    				overflow: auto;
    			}
            <div class="root">
    			<div class="wrap">55555555</div>
    			<div id="box"></div>
    		</div>

    展开全文
  • CSS--解决position: absolute无效的问题

    多人点赞 2021-12-01 00:11:06
    本文介绍CSS进行定位时使用 position:absolute (绝对定位)却不起作用的问题。 需求:已有一个外层的元素(class为"container"),这个外层元素已经设置了margin,现在有一个元素(class为"test"),放在这个外层...

    原文网址:CSS--解决position: absolute无效的问题_IT利刃出鞘的博客-CSDN博客

    简介

            本文介绍CSS进行定位时使用 position:absolute (绝对定位)不起作用的问题。

    问题复现

            需求:已有一个外层的元素(class为"container"),这个外层元素已经设置了margin,现在有一个元素(class为"test"),放在这个外层元素里边,想要基于这个外层元素的margin进行绝对定位。

    代码

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    
        <style>
            .container {
                margin-right: 100px;
            }
    
            .test {
                position: absolute;
                right: 10px;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="test">
            测试
        </div>
    </div>
    
    <script>
    
    </script>
    </body>
    </html>
    

    结果

     

    我们想要的结果:class为“test”的内部元素距离浏览器右侧110px。

    现在的结果:class为“test”的内部元素距离最右侧只有10px。

    原因分析

            默认情况下,所有的元素的position都是static类型,而absolute这个是相对于 static 定位以外的第一个父元素进行定位的。

            以上边的“问题复现”的为例:class为“container”的元素没有设置position,所以它position就是默认的static,这就导致内部的class位“test”的元素在找父元素的时候经历了如下步骤:

    1. 找它最近的父元素“class为“container”的元素”,发现position是默认的static,不满足条件,继续向上级找
    2. 找到body元素,发现body的position也是默认的static,不满足条件,继续向上级找
    3. 找到html元素,这已经是最外边的元素了,只能基于此进行定位了。

    position的属性值

    描述

    absolute

    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    fixed

    生成固定定位的元素,相对于浏览器窗口进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    relative

    生成相对定位的元素,相对于其正常位置进行定位。

    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    static

    默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    sticky

    粘性定位,该定位基于用户滚动的位置。

    它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

    注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

    inherit

    规定应该从父元素继承 position 属性的值。

    initial

    设置该属性为默认值,详情查看 CSS initial 关键字

    解决方案

    设置一下直接父元素的postion为非static的值(一般设置为relative即可)。

    代码

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    
        <style>
            .container {
                margin-right: 100px;
                position: relative;
            }
    
            .test {
                position: absolute;
                right: 10px;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="test">
            测试
        </div>
    </div>
    
    <script>
    
    </script>
    </body>
    </html>
    

    结果

     

     可以看到,“测试”这两个字距离浏览器右侧的距离是110像素了。

    展开全文
  • position定位的使用 相对定位(relative):相对于块级元素(或行内块)自身位置进行定位; 绝对定位(absolute):绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body); 绝对定位的偏移量...

    position定位的使用

    相对定位(relative):相对于块级元素(或行内块)自身位置进行定位;
    绝对定位(absolute):绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);

    绝对定位的偏移量的top/bottom,left/right是相对于已设置relative的祖先元素

    1.有定义偏移量的值(top/bottom,left/right)

    是相对父元素的相对于父级元素的占位区定位(包含padding区域)

    2.没有定义偏移量的值(top/bottom,left/right)

    是相对于父级定位元素的content(内容区,不包括padding的定位) - 简称:无依赖定位

    这里的‘无依赖定位’的关键字是出于看张鑫旭的《css世界》,是本很不错的书籍,介绍了很多的css的相关属性与使用,详细的阐述了属性的使用,值得反复阅读;(张鑫旭的个人博客:https://www.zhangxinxu.com/wordpress/)

    特征:脱离文档流,并流向在后面的区域,并且不占据文档的内容区域

    <style>
     .father {
         width: 2rem;
         height: 2rem;
         background: url(../images/02.jpg);
         background-size: contain;
     }
     .shape {
         position: absolute; // 直接使用,无设置位置偏移量的设置
         width: .5rem;
         height: .5rem;
         background: url(../images/top.png);
         background-size: contain;
     }
     .shapeBottom {
         margin-top: -.5rem;
     }
    </style>
    <h3>无依赖定位</h3>
    <div class="father">
        <div class="shape"></div>
    </div>
    <div class="shape shapeBottom"></div>
    

    效果如下图所示:在这里插入图片描述

    <style>
     .list {
         display: flex;
         justify-content: space-around;
         line-height: .5rem;
         background: #ccc;
     }
     .icon__hot {
         position: absolute;
         width: .2rem;
         height: .2rem;
         background: url(../images/hot.png);
         background-size: contain;
         margin: 0 0 0 -.05rem;
     }
    </style>
    <diV class="list">
    <div>首页</div>
     <div>普通导航</div>
       <div>VR导航<i class="icon__hot"></i></div>
       <div>全景模式</div>
    </diV>
    

    效果如下图所示:
    在这里插入图片描述
    好处:无需给父元素添加position:relative(这个属性的设置还有关系到提升层级的这一层面:z-index),也无需要添加top/bottom,left/right进行位置的控制,并且兼容性很好!节省了很多不必要的代码处理!

    展开全文
  • position: absolute; left: 0; right:0; margin: 0 auto;
  • 定义: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。这些属性是相对于HTML标签
  • position:absolute得到的效果,安卓上不好截图,不放图了,就是呗压在了卡片下面,自行脑补吧 解决办法: 1、和web不同zIndex不好使,999也不好使 2、发现一个新属性(我没用过的就是新的~):elevation 上代码...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试</title> <style> .className1{ width: 300px;...position: relative;...position: absolute
  • 但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有position:absolute属性的子元素进行溢出隐藏!绝对定位...
  • #container { position: absolute; left: 50%; width: 980px; margin-left: -490px; //除去自身的宽度,就是居中位置 }
  • <!doctype html> <html> <head> <meta charset="utf-8"> <title>实现居中对齐<... position: absolute; width: 700px; height: 500px; background: pink; ...
  • 相对定位: position: relative: 相对于其源文档流的位置进行定位,...position:absolute 相对于最近的一个父元素设置了position: relative的进行定位,子绝父相 参考:https://segmentfault.com/a/1190000017756571 ..
  • 只有首行展示,此时的关键点position:absolue,top有设定,如果不设定效果: 除了首行,其他都有,深入了解该问题的原因那解决这个问题就有思路了:不设定top,bottom;有位置偏差的用maring ...
  • 微信小程序实现这种效果: <view class="topbg"> <view class="topbg_top"> </view>...position: absolute;border-radius: 8rpx;left:10%;} .topbg_bottom{width:100%;height:100rpx;background-color:rgb(41,125,96);}
  • 下面这段代码你猜猜div有多大 <body> <div>Overlay example text</div> </body> <style> *{ padding: 0;... position: absolute; height: 100%; width: 100%; backgr
  • 因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素。test.out {position:relative;}.out:after{content: "";clear: both;}....
  • 如果你想在<...div id="div1" style="position: absolute"> </div> </td> 你会发现是没有用的,div1会蹦出来,然后再给table添加position:relative 发现还是没有用 这里有个解决方案,
  • 我知道我可以在页脚上使用positionabsolute但我宁愿避免这种情况,因为页脚的高度可能不知道. 我尝试将.tile转换为flexBox本身并将其方向设置为列,但这不起作用.我也尝试将每个瓷砖变成一个表格单元格,但这也不起...
  • 在CSS方面我很精通,但今天我偶然发现了一个让我头疼的片段(here和here).我从来没有想过可以通过margin来定位一个绝对定位的元素:0 auto,但是给定的元素有一个设置...position: relative;width: 300px;}#child{backg...
  • 关于position:absolute 绝对定位元素相对于最近的非 static 祖先元素定位。 当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块)。-----------------MDN官网 ICB(inital container ...
  • 关于设置了position:absolute的元素的位置设定:left和margin-left。困扰多时...诚向各位前辈请教!实现一个自适应布局,效果图和HTML代码如下:侧栏主栏要求两栏间距为10px。css代码如下:.parent{font-size:22px;...
  • /* establish nearest positioned ancestor for abs.positioning*/ } img { position: absolute; left: 50%; /* positions img relative to container */ top: 50%; /* positions img relative to container */ ...
  • 然后我检查的时候发现了position: absolute和transform: translatex的使用实现了这个效果. 如果单纯设置以下代码,会发现,元素向左偏移了自身宽度的50%。 body { position: relative; margin: 0px; padding:...
  • 【解决方法】使用 position: absolute (使用的是 Vue的语法) 页面效果 (PS 右侧主体内容中,正文内容高度是超出页面高度的,需要滚动) 左侧导航栏展开,正文内容未滚动 左侧导航栏收起,正文内容滚动到底部...
  • 设置position:absolute绝对定位后,标签发生重叠现象... 已抓狂!!一.问题背景:外层容器宽高未知,里面为四个相同大小的格子,格子间间距为10px,如下图所示:请实现该全等四宫格.二.代码如下:HTML代码:CSS代码:...
  • 绝对定位的元素完全从文档流当中移走,所以他们的尺寸无法影响到父元素的尺寸。 如果你真的想实现绝对定位还能撑开父元素,只能通过JavaScript实现:获取到绝对定位的子元素的高度,再设置给父元素。...
  • 当元素设置position:absolute时,会脱离正常文档流,后面元素会忽略该元素-》覆盖可以给元素设置min-height解决-----------------------------------------------...
  • position:absolute元素高度自适应,换成relative设置top试试这篇文章发布于 2019/11/08,归类于 CSS标签:position:absolute元素高度自适应,怎么用js计算元素高度一般元素设置position:absolute后,就已经脱离了...
  • 但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏!效果:...
  • 这是 定位到了浏览器的底部了啊,拖动滚动条,它又上去了,如下图没有父容器不是说相对于定位 吗,上几节讲的,的最底部不是在最后一个标签后面吗?...position:absolute;bottom:0;right:0;}文本文本文本文本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 356,989
精华内容 142,795
关键字:

position:absolute;