相对于（绝对）div定位标题

Question

I have a block <div> I want to define with precise pixel coordinates via position: absolute , but I want to position a heading above its parent <div> . 我有一个块<div>我想通过position: absolute来定义精确的像素坐标，但是我想将标题放置在其父<div>上方。 If the font-size changes (or the user enlarges the text), the block <div> must stay in exactly the same place, but the heading may move up/down to accommodate the larger/smaller text. 如果字体大小发生更改（或用户放大了文本），则<div>块必须保留在完全相同的位置，但是标题可以向上/向下移动以容纳较大/较小的文本。

Here is some sample code that, honestly, doesn't come close, but may help to illustrate the problem. 老实说，这里没有一些示例代码，但是可能有助于说明问题。 It's just one of the variations I tried: 这只是我尝试过的变体之一：

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

The idea is the blue inner_box must be positioned exactly at the marker (which it is), but the Heading text must be directly above it, and the red 1px border should enclose everything. 这个想法是，蓝色的inner_box必须正好位于marker （即marker ），但“ Heading文本必须直接位于marker正上方，红色的1px边框应将所有内容括起来。

Here is how it looks in Firefox: 这是在Firefox中的外观：

Firefox的实际代码

And here's how I would like it to look instead: 这是我希望它看起来的样子：

所需外观的模型

Since I have several of these boxes to work with, and their positions may change depending on viewport size, and the heading font/text will vary, I need a dynamic solution, here. 由于我有几个要使用的框，并且它们的位置可能会根据视口的大小而变化，并且标题字体/文本也会有所不同，因此在这里我需要一个动态解决方案。 I would prefer pure CSS3, but if JS is required, I could live with that. 我更喜欢纯CSS3，但是如果需要JS，我可以接受。

Answer 1

I have created a fiddle for you that works for any font size, position and number of boxes. 我为您创建了一个小提琴，该小提琴适用于任何字体大小，位置和盒子数。

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

Also 也

HTML 的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 的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; }

I hope to have helped you! 希望对您有所帮助！

Answer 2

How this is done: 如何完成的：

The position id gives the position of the entire element. 位置ID给出了整个元素的位置。

The box class defines the width and height of the box and only has borders for bottom left and right leaving the top open because the header will be there box类定义了框的宽度和高度，并且只在左下和右下都有边框，使顶部保持打开状态，因为标题将在那里

The header class height is set to zero as to not influence the box's position and is moved up 18 px 标题类的高度设置为零，以不影响框的位置，并向上移动18 px

The h4 has borders on top left and right but not on the bottom so it will not block out the box h4在左上方和右上方有边框，但在底部没有边框，因此不会遮挡盒子

The html: 的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

Firstly your body tags are are not wrapping your code. 首先，您的身体标签没有包装您的代码。

Secondly your red box div should wrap all the other divs and be closed last. 其次，您的红色框div应该包装所有其他div并最后关闭。 It closes early 早点关门

相对于（绝对）div定位标题

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-12-01 00:51:27

解决方案2
1 2014-12-01 00:47:49

解决方案3
0 2014-12-01 00:49:09

相对于（绝对）div定位标题

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-12-01 00:51:27

解决方案2 1 2014-12-01 00:47:49

解决方案3 0 2014-12-01 00:49:09

解决方案1
2 已采纳 2014-12-01 00:51:27

解决方案2
1 2014-12-01 00:47:49

解决方案3
0 2014-12-01 00:49:09