Question

我有一个块<div>我希望通过position: absolute定义精确的像素坐标，但我希望将标题放在其父<div>之上。如果字体大小发生变化（或用户放大文本），则块<div>必须保持在完全相同的位置，但标题可以向上/向下移动以适应更大/更小的文本。

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

<!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>

我们的想法是蓝色inner_box必须准确定位在marker（它是），但Heading文字必须直接位于其上方，红色1px边框应该包围一切。

以下是Firefox的外观：

Actual code from Firefox

以下是我希望它的样子：

Mockup of desired appearance

由于我有几个这样的盒子可以使用，并且它们的位置可能会根据视口大小而改变，并且标题字体/文本会有所不同，我需要一个动态解决方案。我更喜欢纯CSS3，但如果需要JS，我可以忍受。

Answer 1

我为你创造了一个小提琴，适用于任何字体大小，位置和方框数。

http://jsfiddle.net/y73sqdr9/3/

另外

HTML

<div class="box target">
    <h1>Headingggggggggg</h1>
    <div class="inner">
        This is the <strong>inner_box</strong>.
    </div>
</div>

<div class="square target"></div>

<div class="box target2">
    <h1>Headingggggggggg</h1>
    <div class="inner">
        This is the <strong>inner_box</strong>.
    </div>
</div>

<div class="square target2"></div>

CSS

.box {
    position: absolute;
    border: 1px solid red;
    border-top: none; }

.box h1 {
    margin: -2em -1px -1px;
    padding: .5em;
    border: 1px solid red;
    border-bottom: none;

    line-height: 1; }

.box .inner {
    padding: 1em;
    background: #CCF; }

.square {
    position: absolute;
    width: 16px;
    height: 16px;

    background: red; }

.target { left: 100px; top: 150px; }
.target2 { left: 120px; top: 280px; }

我希望能帮到你！

Answer 2

如何做到这一点：

位置id给出整个元素的位置。

框类定义了框的宽度和高度，并且只有左下角和右边的边框，顶部是打开的，因为标题将在那里

标题类高度设置为零，不会影响框的位置，并向上移动18像素

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>

Answer 3

首先，你的身体标签没有包裹你的代码。

其次你的红盒div应该包装所有其他div并最后关闭。它早早关闭

将标题相对于绝对div（上方）定位

3 个答案: