Расположение элемента на границы <div>

176
06 июля 2017, 00:27

В общем, суть в чем. Мне нужно сверстать так, как показано на рисунке, т.е элемент должен располагаться на границе. Единственное, что в голову приходит, это задать position: absolute и с помощью top, left поставить, куда надо. Но почему-то кажется, что это неправильно. Может быть есть другой способ?

Answer 1

Вместо position: absolute можно использовать отрицательные маргины.

div{ 
  border: 1px solid black; 
  background: white; 
  border-radius: 6px; 
} 
#block{ 
  width: 400px; 
  height: 100px; 
  margin: 40px; 
} 
#onborder{ 
  height: 20px; 
  width: 40px; 
  margin-top: -10px; 
  margin-left: 20px; 
}
<div id='block'> 
  <div id='onborder'> Оно? </div> 
</div>

Answer 2

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

<fieldset> 
        <legend><div style="background-color:red">Какой-то блок</div></legend> 
        <div>Какой-то интересный контент</div> 
    </fieldset>

READ ALSO
Вертикальное и горизонтальное выравнивание блоков

Вертикальное и горизонтальное выравнивание блоков

Есть блоки, которые надо красиво расположить, я использовал flex, но у меня после перевода на новую строку остается место пустое, а надо чтобы...

209
Как обработать событие по нажатию на кнопку?

Как обработать событие по нажатию на кнопку?

Нажимаю на кнопку и нужно обработать это событие в jquery

368
Мониторинг html формы через JS

Мониторинг html формы через JS

Решил добавить смайлики на сайт по вот этому примеру https://myrusakovru/php-comments-smile

220
Переход по input javascript

Переход по input javascript

Всем привет, не получается одна задачка есть 3 input'а нужно что бы при вводе в первый трёх символов focus переходил на другой input так же и при вводе...

296