Html 相对于（上方）绝对div定位航向_Html_Css

Html 相对于（上方）绝对div定位航向

html css

Html 相对于（上方）绝对div定位航向,html,css,Html,Css,我有一个块，我想通过位置：绝对定义精确的像素坐标，但我想将标题定位在其父上方。如果字体大小改变（或用户放大文本），块必须保持在完全相同的位置，但标题可能会向上/向下移动以容纳较大/较小的文本下面是一些示例代码，老实说，它们并不接近，但可能有助于说明问题。这只是我尝试过的变体之一： <!doctype html> <html> <head> <title>Positioning Test</title> <style>

我有一个块

，我想通过

位置：绝对

定义精确的像素坐标，但我想将标题定位在其父

上方。如果字体大小改变（或用户放大文本），块

必须保持在完全相同的位置，但标题可能会向上/向下移动以容纳较大/较小的文本

下面是一些示例代码，老实说，它们并不接近，但可能有助于说明问题。这只是我尝试过的变体之一：

<!doctype html>
<html>
<head>
<title>Positioning Test</title>
<style>
    #box1 { border: red 1px solid; }
    #box1 h4 { margin: 0; color: blue }
    .inner_box {
        background: #aaf;
        width: 400px;
        height: 50px;
    }
    .target_pos {
        position: absolute;
        top: 50px;
        left: 100px;
    }
    #marker {
        width: 10px;
        height: 10px;
        background: red;
    }
</style>
</head>
<body>

<div id="box1">
    <h4>Heading</h4>
    <div class="inner_box target_pos">
        This is the <strong>inner_box</strong>.
    </div>
</div>

<!-- Marks where the inner_box should begin -->
<div id="marker" class="target_pos"></div>

</body>
</html>


定位试验
#框1{边框：红色1px实心；}
#框1 h4{边距：0；颜色：蓝色}
.内箱{
背景：#aaf；
宽度：400px；
高度：50px；
}
.目标位置{
位置：绝对位置；
顶部：50px；
左：100px；
}
#标记{
宽度：10px；
高度：10px；
背景：红色；
}
标题
这是内部\u框。

想法是蓝色的
内框
必须准确地定位在
标记
（它就是这样）上，但是
标题
文本必须直接位于其上方，红色1px边框应将所有内容围起来
以下是它在Firefox中的外观：

以下是我希望它的外观：

由于我有几个这样的框要处理，它们的位置可能会根据视口大小而改变，标题字体/文本也会有所不同，所以我需要一个动态解决方案，这里。我更喜欢纯CSS3，但如果需要JS，我可以接受它。
如何做到这一点：
位置id给出了整个元素的位置
box类定义了长方体的宽度和高度，并且只有左下角和右下角的边框使顶部保持打开状态，因为页眉将在那里
收割台等级高度设置为零，以不影响箱子的位置，并向上移动18 px
h4在左上角和右上角有边框，但在底部没有边框，因此它不会挡住盒子
html：

<!DOCTYPE html> <html> <head> <title>Positioning Test</title> <style> .header{ position: relative; bottom: 18px; right:1px; background: white; height:0px; } .header h4{ width: 400px; margin:0; padding:0; border: 1px red solid; border-bottom:none; } .box{ border: 1px red solid; border-top:none; width: 400px; height: 300px; background: #aaf; } #position1 { position: absolute; top: 50px; left: 100px; } </style> </head> <body> <div id="position1" class="box"> <div class="header"> <h4>Title</h4> </div> <div class="inner"> I'm inside! </div> </div> </body> <html>

定位试验 .标题{ 位置：相对位置；底部：18px；右：1px；背景：白色；高度：0px； } .收割台h4{ 宽度：400px；保证金：0；填充：0；边框：1px红色实心；边框底部：无； } .盒子{ 边框：1px红色实心；边界顶部：无；宽度：400px；高度：300px；背景：#aaf； } #位置1{ 位置：绝对位置；顶部：50px；左：100px； } 标题我在里面！
如何做到这一点：
位置id给出了整个元素的位置
box类定义了长方体的宽度和高度，并且只有左下角和右下角的边框使顶部保持打开状态，因为页眉将在那里
收割台等级高度设置为零，以不影响箱子的位置，并向上移动18 px
h4在左上角和右上角有边框，但在底部没有边框，因此它不会挡住盒子
html：

<!DOCTYPE html> <html> <head> <title>Positioning Test</title> <style> .header{ position: relative; bottom: 18px; right:1px; background: white; height:0px; } .header h4{ width: 400px; margin:0; padding:0; border: 1px red solid; border-bottom:none; } .box{ border: 1px red solid; border-top:none; width: 400px; height: 300px; background: #aaf; } #position1 { position: absolute; top: 50px; left: 100px; } </style> </head> <body> <div id="position1" class="box"> <div class="header"> <h4>Title</h4> </div> <div class="inner"> I'm inside! </div> </div> </body> <html>

定位试验 .标题{ 位置：相对位置；底部：18px；右：1px；背景：白色；高度：0px； } .收割台h4{ 宽度：400px；保证金：0；填充：0；边框：1px红色实心；边框底部：无； } .盒子{ 边框：1px红色实心；边界顶部：无；宽度：400px；高度：300px；背景：#aaf； } #位置1{ 位置：绝对位置；顶部：50px；左：100px； } 标题我在里面！
如何做到这一点：
位置id给出了整个元素的位置
box类定义了长方体的宽度和高度，并且只有左下角和右下角的边框使顶部保持打开状态，因为页眉将在那里
收割台等级高度设置为零，以不影响箱子的位置，并向上移动18 px
h4在左上角和右上角有边框，但在底部没有边框，因此它不会挡住盒子
html：

<!DOCTYPE html> <html> <head> <title>Positioning Test</title> <style> .header{ position: relative; bottom: 18px; right:1px; background: white; height:0px; } .header h4{ width: 400px; margin:0; padding:0; border: 1px red solid; border-bottom:none; } .box{ border: 1px red solid; border-top:none; width: 400px; height: 300px; background: #aaf; } #position1 { position: absolute; top: 50px; left: 100px; } </style> </head> <body> <div id="position1" class="box"> <div class="header"> <h4>Title</h4> </div> <div class="inner"> I'm inside! </div> </div> </body> <html>

定位试验 .标题{ 位置：相对位置；底部：18px；右：1px；背景：白色；高度：0px； } .收割台h4{ 宽度：400px；保证金：0；填充：0；边框：1px红色实心；边框底部：无； } .盒子{ 边框：1px红色实心；边界顶部：无；宽度：400px；高度：300px；背景：#aaf； } #位置1{ 位置：绝对位置；顶部：50px；左：100px； } 标题我在里面！
如何做到这一点：
位置id给出了整个元素的位置
box类定义了长方体的宽度和高度，并且只有左下角和右下角的边框使顶部保持打开状态，因为页眉将在那里
收割台等级高度设置为零，以不影响箱子的位置，并向上移动18 px
h4在左上角和右上角有边框，但在底部没有边框，因此它不会挡住盒子
html：

<!DOCTYPE html> <html> <head> <title>Positioning Test</title> <style> .header{ position: relative; bottom: 18px; right:1px; background: white; height:0px; } .header h4{ width: 400px; margin:0; padding:0; border: 1px red solid; border-bottom:none; } .box{ border: 1px red solid; border-top:none; width: 400px; height: 300px; background: #aaf; } #position1 { position: absolute; top: 50px; left: 100px; } </style> </head> <body> <div id="position1" class="box"> <div class="header"> <h4>Title</h4> </div> <div class="inner"> I'm inside! </div> </div> </body> <html>