带有百分比的相对定位顶部不适用于内嵌元素 [英] Relative positioning Top with percentage doesn't work for in-line element

查看：24
本文介绍了带有百分比的相对定位顶部不适用于内嵌元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在下文中，如果我对顶部使用百分比值，则不会重新定位 em.如果我使用 px，它工作正常.为什么?

我在 w3 中对此进行了研究，但找不到有关使用百分比值的任何限定条件.定位上下文是 p - 因为它的相对定位 - 它应该具有从行框派生的高度.

为了清楚起见，我意识到了变通办法，但我试图理解规范.到目前为止，我的经验是，即使不是很明显，通常也有一些逻辑.我提出这个问题的目的是找出将这种行为与视觉格式模型中的指定行为相协调的逻辑是什么.

HTML

<html xmlns="http://www.w3.org/1999/xhtml"><头><title></title><风格>身体 {字体大小:x-小；}div{轮廓:1px纯红色；背景颜色:银色；溢出:可见；}#测试他们{位置:相对；红色;底部:-10%；}</风格><身体><div id="测试"><p>Lorem ipsum sat amet，<em>duo ut dicant expetenda</em>.Laudem maiestatis eam et.Lucilius patrioque 导师等.Sea at zril affert, mea accusam nominavi officiis te.Ad nam tota quidam mandamus, pro <em>dolor</em>veri volumus torquatos an. </p>

</html>

解决方案

@Cool Blue,

您对规范的阅读是正确的.top 定义的定位元素的偏移量是根据该元素的包含块的高度计算的(在这种情况下由

生成).但是，您遇到的问题似乎是浏览器计算 height 属性方式的一个众所周知的问题的变体.这个问题通常发生在我们尝试创建一个占据视口全高的元素.

问题是浏览器不会计算元素的高度，除非您为页面上的元素指定绝对height.相反，浏览器让内容在视口的宽度内流动，直到视口结束.因此，如果您在 上设置 top: X%，并且包含元素具有 height: auto，则浏览器将不执行任何操作.如果您要为 top 使用百分比值(并且如果您只想在整个元素树中使用百分比)，则必须设置 每个的 height 祖先到一个合适的百分比.

HERE 是一种仅使用百分比的解决方案.请注意，效果有点不均匀，因为更改视口大小将更改 相对于

中的文本的偏移量.因此，虽然这是一个有趣的理论讨论，但从设计的角度来看，以像素为单位设置 top 可能更好.

In the following, the em is not repositioned if I use a percentage value for Top. It works fine if I use px. Why?

I researched this in w3 and could not find any qualification on using percentage values. The positioning context is the p - since its relative positioning - which should have Height derived from the line boxes.

EDIT: Just to be clear, I realise the work-arounds, but I am trying to understand the specification. My experience so far is that there is generally some logic there even if its not immediately obvious. My aim with this question is to find out what is the logic in reconciling this behaviour with the specified behaviour in the visual formatting model.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        body {
            font-size: x-small;
        }
        div{
            outline: 1px solid red;
            background-color: silver;
            overflow: visible;
        }

        #test em {
            position: relative;
            color: red;
            bottom: -10%;
        }
    </style>
</head>
<body>
    <div id="test">
        <p>Lorem ipsum sit amet, <em>duo ut dicant expetenda</em>. Laudem maiestatis eam et. Lucilius patrioque instructior et has. Sea at zril affert, mea accusam nominavi officiis te. Ad nam tota quidam mandamus, pro <em>dolor</em> veri volumus torquatos an.</p>
    </div>
</body>
</html>

解决方案

@Cool Blue,

Your reading of the specification is correct. A positioned element's offset as defined by top is calculated based on the height of that element's containing block (which in this case is generated by <p>). However, the problem you are encountering seems like a variation on a well known issue with the way browsers calculate the height property. This problem typically occurs when we are trying to create an element that takes up the full-height of the viewport.

The issue is that browsers don't bother to calculate the height of an element unless you specify an absolute height for an element on the page. Instead, browsers let the content flow within the width of the viewport until the viewport comes to an end. Thus, if you set top: X% on <em>, and the containing elements have height: auto, the browser does nothing. If you are going to use a percentage value for top (and if you only want to use percentages throughout the entire element tree) you must set the height of every ancestor to a suitable percentage.

HERE is a solution that uses only percentages. Note that the effect is a bit uneven since changing the viewport size will change the offset of <em> relative to the text within <p>. So, while this is an interesting theoretical discussion, it may be better to set top in pixels from a design perspective.

这篇关于带有百分比的相对定位顶部不适用于内嵌元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆