Как сместить border css
Перейти к содержимому

Как сместить border css

  • автор:

Свойство outline-offset

Можно сделать такой интересный эффект (обратите внимание на толщину белого промежутка между границами, он 10px , а не 14 , так как часть съел outline своей толщиной в 4px ):

Смотрите также

  • свойство outline-width ,
    которое задает толщину рамки
  • свойство outline-style ,
    которое задает стиль рамки
  • свойство outline-color ,
    которое задает цвет рамки
  • свойство outline ,
    которое является свойством сокращением для рамок

Как работает position: relative;

Элемент с position: relative; смещается на расстояние, указанное в свойствах top , right , bottom , left , от своего первоначального расположения. Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение relative , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.

Переместить элемент над другими элементами

Чтобы элемент «2» спрятался под другой часто неподвижный элемент «1», можно элементу «1» указать position: relative; , при котором не игнорируется свойство z-index .

position: relative;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент «1» Элемент «2» 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

 .relative background: lightpink; > .margin Элемент «1» Элемент «2»

Большое количество контекста наложения усложняет работу, поэтому лучше не применять z-index там, где без него можно обойтись.

position: relative; родителя и нижестоящего от родителя элемента z-index: 1; родителя
11 12 13 14 15 16 17 18 19 20

  
1 2 3
11 12 13 14 15 16 17 18 19 20

Сместить элемент в сторону так, чтобы соседние элементы остались на своих местах

исходное положение
элемент
position: relative

Cвойства top , right , bottom , left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto .

position: relative; top: 4em;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Подвинусь на 3em вниз от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

  Элемент

Элемент с top: -4em; примет то же положение, что и с bottom: 4em; . Элемент с left: -4em; примет то же положение, что и с right: 4em; .

top: -4em; bottom: 4em;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Подвинусь на 2em вверх от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

  Элемент

При одновременном использовании свойств top и bottom , свойство bottom игнорируется. При одновременном использовании свойств left и right , свойство right игнорируется.

top: 4em; right: 4em; bottom: 4em; left: 4em;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Элемент 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

  Элемент

Значения свойств top и bottom в процентах рассчитываются от высоты содержимого ближайшего не inline родителя, у которого height не auto .

height: 5em; ближнего родителя padding: 1em; ближнего родителя box-sizing: border-box; ближнего родителя

1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40

Если height ближайшего родителя имеет значение auto , то height в процентах заменяется на height: auto; , при котором не работают свойства top и bottom в процентах у ближайших потомков.

height: 10em; дальнего родителя height: 50%; ближнего родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Значения свойств left и right в процентах рассчитываются от ширины содержимого ближайшего не inline родителя.

width: 10em; ближнего родителя (для left и right необязательно) padding: 1em; ближнего родителя box-sizing: border-box; ближнего родителя

1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40

Значения свойств top , right , bottom , left в процентах пропускают inline родителя.

height: 10em; дальнего родителя display: inline-block; ближнего родителя

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Значение overflow отличное от visible у родителя прячет выходящую за границы часть дочернего элемента с первого экрана видимости.

overflow: visible; родителя (по умолчанию) overflow: auto; родителя overflow: hidden; родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

  
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40

Указать родителя, в рамках которого будет перемещаться элемент с position: absolute;

position: relative; ближнего родителя
1 2 3 4 5 6 7 8 9 10

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Элемент 29 30 31 32 33 34 35 36 37 38 39 40 41 42

43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

  
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Элемент 29 30 31 32 33 34 35 36 37 38 39 40 41 42
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
  • Передвинуть элемент с помощью свойства CSS margin
  • Передвинуть элемент с помощью свойства CSS transform: translate()

Как передвинуть border у любого элемента

Author24 — интернет-сервис помощи студентам

Коллеги, возник чисто дизайнерский вопрос оформления кода.
Вот у нас есть на странице элемент с border и вопрос состоит в том КАК ЖЕ ДВИГАТЬ BORDER В CSS?!
Знаю что можно так, но мне такой вариант не подходит:

1 2 3 4
.selector-block { border-bottom: 1px solid #000; padding-bottom: 8px; }

Чтобы стало понятно, посмотрите на картинку.
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как прикрутить анимацию для элемента border на wordpress
Есть сайт, у него есть блоки, созданные в плагине pagebuilder by siteorigins. Как можно прикрутить.

CSS border-right как убрать крайний правый border
делаю сайт http://medi-clinic.ru и столкнулся с такой проблемой, в меню пункты разделены рамкой.

Как узнать Handle любого элемента?
1)Народ как в своей(неважно) узнать Handle любого элемента.? 2)Как получит Handle чужого окна.

Как вернуть тип переменной и любого другого элемента программы?
Есть такой примитивный код. #include "stdafx.h"//должна быть в начале #include <conio.h>.

Эксперт JS

6248 / 3496 / 1038
Регистрация: 07.09.2019
Сообщений: 5,621
Записей в блоге: 1

Лучший ответ

Сообщение было отмечено gogolik как решение

Решение

Есть такая мысль:

div>/div>
1 2 3
div{width:100px; background-color:#dddd00; height:100px; padding:1px} div::after{display:block;width:100px; height:100px; background-color:transparent; content:''; margin-left:20px; margin-top:20px; border:1px solid black}

Добавлено через 2 минуты
Чтобы можно было создавать такой эффект для блока любых размеров, стили для after предлагаю генерировать на JS.

Возможно также, следует смотреть в сторону теней.

Эксперт HTML/CSS

2253 / 1639 / 644
Регистрация: 07.08.2016
Сообщений: 3,945

ЦитатаСообщение от CyberPaladin Посмотреть сообщение

Чтобы стало понятно, посмотрите на картинку.
Вообще ничего не понятно

ЦитатаСообщение от CyberPaladin Посмотреть сообщение

Знаю что можно так, но мне такой вариант не подходит:

1 2 3 4 5
.selector-block { border-bottom: 1px solid #000; padding-bottom: 8px; background-clip:content-box; }

Добавлено через 5 минут

ЦитатаСообщение от DrType Посмотреть сообщение

Чтобы можно было создавать такой эффект
А, так вот что имелось ввиду! Ну да время полчетвертого ночи, туплю

ЦитатаСообщение от DrType Посмотреть сообщение

для блока любых размеров, стили для after предлагаю генерировать на JS.
Не проще задать ширину и высоту after как 100% ?

Эксперт JS

6248 / 3496 / 1038
Регистрация: 07.09.2019
Сообщений: 5,621
Записей в блоге: 1
Не проще задать ширину и высоту after как 100% ?
Действительно, проще. Туплю.

Когда это писал, думал о том, как бы приспособить стили after под деформации блока. Скажем, чтобы after имел всегда такой же border-radius , такое же значение transform и т. д.

Регистрация: 27.05.2017
Сообщений: 118

Спасибо всем, действительно я понял что это не так сложно. Оба варианта, хороши! Но, все же первый вариант, более естественный и более совместим со старыми браузерами.

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как написать рекурсивную функцию подсчета вхождения любого элемента?
Здравствуйте. Читаю книгу — Грэм. Ansi Common lisp Задача — "Предложите итеративное и.

Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?Чет.

Получение имени элемента Border
Доброго времени суток. Ребят, у меня возникла ситуация, решения которой я пока не могу найти. У.

Как узнать margin-left любого элемента от главного окна окна браузера?
причем не важно какую вложенность имеет элемент сам элемент, т.е. в скольких контейнерах он бы не.

Или воспользуйтесь поиском по форуму:

Как сдвинуть border на определенное расстояние?

Может быть вопрос прозвучал нубовски, но я реально с таким не сталкивался еще.
Нужно еще один контейнер, чтобы бордер его обтекал или как то еще есть способы?

5aeea6da154a6770446049.png

На кртинке цветом показал где должны быть бордеры

  • Вопрос задан более трёх лет назад
  • 9377 просмотров

Комментировать

Решения вопроса 1

pi4yyy

Все можно решить c помощью padding:
https://jsfiddle.net/r5hkjeLs/

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Ответы на вопрос 2

Lara164

начинающий верстальщик html, css

5aeeaab7281a4628833793.jpeg

такое лучше через псевдоэлемент. Основной Ваш див , например

.block position: relative;
width: 200px;
height:300px;
background-color: #fff;
>

.block::before content: «»;
z-index: 1;
position: absolute;
width:180px;
height: 280px;
top: 10px;
left: 10px;
border: 2px solid blue; >
Только имейте ввиду, что все, что внутри основного блока надо будет тоже поместить в отдельный див и так же абсолютно позиционировать с z-индексом 2

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *