Позиционирование заголовка относительно (выше) абсолютного div

У меня есть блок <div> Я хочу определить с точными координатами пикселей через position: absolute, но я хочу разместить заголовок над его родителем <div>. Если размер шрифта изменяется (или пользователь расширяет текст), то блок <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 должен быть расположен точно в (что это), но Heading текст должен быть прямо над ним, а красный 1px границы должен охватывать все.

Вот как это выглядит в Firefox:

Actual code from Firefox

А вот как бы мне хотелось, чтобы это выглядело вместо:

Mockup of desired appearance

Поскольку я несколько из этих окон для работы с, и их позиции могут меняться в зависимости от размера видового экрана, а шрифт/текст заголовка будет меняться, здесь мне нужно динамическое решение. Я бы предпочел чистый CSS3, но если JS требуется, я мог бы жить с этим.

источник

2014-12-01 type_outcast

Я создал для вас скрипку, которая работает для любого размера, положения и количества шрифтов.

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

Я надеюсь помочь вам!

источник

2014-12-01 00:51:27

Да, вы помогли. На самом деле, ваша скрипка отлично работает! Большое спасибо за быстрый и элегантный ответ. –

Как это делается:

Положение идентификатор дает положение всего элемента.

Класс коробки определяет ширину и высоту окна, а только имеет границы для нижней части слева и справа оставив сверху открытым, так как заголовок будет там

Высота класс заголовка устанавливается равным нулю, чтобы не влиять положение блока и перемещается вверх 18 точек

Н4 имеет границы на верхний левый и правый, но не на дне, так что не будет блокировать коробку

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>

источник

2014-12-01 00:47:49 Zachooz

Ваш код помещает заголовок (заголовок «Заголовок» в вашем примере) в (50 100). Это очень легко сделать, но не то, что я хочу. Я хочу, чтобы 'inner' div точно в (50,100), а' header' - динамически располагался над ним. –

@type_outcast А я этого не видел. Я пересмотрю свой код. – Zachooz

@type_outcast fixed :) – Zachooz

Во-первых, ваши теги тела не обертывают ваш код.

Во-вторых, ваш красный поле div должен обернуть все остальные div и быть закрытым последним. Он закрывается раньше

источник

2014-12-01 00:49:09 Creaven

Действительно, тег открытия '' вышел из положения в моем примере. Я исправил это. Благодаря! Не уверен, что вы имеете в виду со вторым комментарием; div 'box1' охватывает все, кроме div« marker », что было моим намерением. («Маркер» является автономным div для обозначения желаемого целевого местоположения для примера.) –

Позиционирование заголовка относительно (выше) абсолютного div

ответ

Смежные вопросы