Можно ли использовать свойство position для строчных элементов?

@СергейСереб · Регистрация: 19.09.2016

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

Можно ли использовать свойство position для строчных элементов, преобразованных в блочные?

Сделал с блоком-оберткой. А можно ли это сделать, используя только строчный преобразованный элемент в блочный и сам позиционируемый блок?

HTML5
1
2
3
4
<div class="wrap">
<a href="#">text</a>
<div class="new"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrap {
   position:relative;
}
a {
  display: block;  
  width:300px;
  height:300px;
  background-color:lightgray;
  padding:0;
  margin:0;
  text-align:center;  
  line-height: 300px;
 
}
.new {
  position:absolute;
  width:100px;
  height:100px;
  top:0px; left:0px;
  background-color:red;
}

Почему для а- тега не работает свойство позиционирования? Я ведь преобразовал его в блочный.

@mrtoxas · 12.11.2016, 01:33

Не совсем понятно.
Когда вы задаете строчному элементу абсолютное позиционирование, он становится блочным.

@СергейСереб · 12.11.2016, 01:35 **[ТС]**

мне нужно строчному задать отностельное позиционирование. Самое постое позиционирование блока в блоке. Но тот, в котором позиционируется - должен быть строчный строчный
Результат как на картинке. Но чем проще и короче запись в HTML и CSS - тем лучше. Я пытался без обертки, просто переопределенному тегу "а" задать относительное позиционирование - не работает.

@mrtoxas · 12.11.2016, 01:38

Задавайте.

CSS
1
2
3
4
5
6
7
8
9
10
a {
  position: absolute;
  top:0;
  left:0;
  width:300px;
  height:300px;
  background-color:lightgray;
  text-align:center;  
  line-height: 300px;
}

@СергейСереб · 12.11.2016, 01:43 **[ТС]**

работает... Но мне строчный блок(всмысле, который был строчным) нужно относительно спозиционировать

@mrtoxas · 12.11.2016, 01:47

Вот условия-то и не понятно. Что должно быть на выходе? Вы бы лучше предоставили тот вариант, который у вас не получается.
Вы хотите сделать так?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a {
  display: block;
  position: relative;
  width:300px;
  height:300px;
  background-color:lightgray;  
  text-align:center;  
  line-height: 300px;
}
.new {
  position:absolute;
  width:100px;
  height:100px;
  top:0px; left:0px;
  background-color:red;
}

HTML5
1
2
3
<a href="#">text
  <div class="new"></div>
</a>

@СергейСереб · 12.11.2016, 01:56 **[ТС]**

Сообщение от mrtoxas

Что должно быть на выходе?

Это для "кнопок" меню. Т.е. чтобы для каждой кнопки не высчитывать позицию от угла экрана, нужно относительное позиционирование блока кнопочки, а не абсолютное относительно всего поля. На самой кнопочке(которую я делаю тегом "а") есть элемент, который будет сделан дополнительным элементом на этой кнопочке. Его я планировал сделать блоком, абсолютно спозиционировав относительно родительского блока - кнопочки. Т.е. сама кнопка - родитель с относительным позиционированием на страничке, маленький элемент - делаль кнопки - дочерний элемент с абсолютным позиционироваием внутри кнопки

@mrtoxas · 12.11.2016, 02:04

absolute-элемент не может позиционироваться относительно другого absolute-элемента. У него должен быть родитель с относительным позиционированием (relative), иначе, absolute-элемент будет позиционироваться относительно страницы.

Сообщение от СергейСереб

Т.е. сама кнопка - родитель с относительным позиционированием на страничке, маленький элемент - делаль кнопки - дочерний элемент с абсолютным позиционироваием внутри кнопки

Я выше дал такой код. Квадрат позиционируется относительно ссылки.
Или все равно не то?

@СергейСереб · 12.11.2016, 13:50 **[ТС]**

Нужно что-то типа этого.
Только при наведении на каждый из отдельных блоков в них так же должен появляться красный квадратик. И у меня опять проблема с тем, что тут два элемента видоизменяются при наведении мыши. Не понимаю принцип, как это организовать...
Да и оооочень смущает использования фактически пустого <span>(хоть span, хоть div...) Он, полагаю вообще для этого не предназначен...

CSS
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
ul {
  list-style:none;
}
.active a, a:hover{
  position: relative;
  background-color:gray;
}
a {
  float:left;
  top:0;
  left:0;
  width:100px;
  height:100px;
  background-color:lightgray;
  text-align:center;  
  line-height: 100px;  
}
li a span{
  position:absolute;
  width:10px;
  height:10px;
  top:0px; left:90px;
  background-color:red;
  z-index:0;
  display:none;
}
.active a span, a div:hover {
  display:block;
}

HTML5
1
2
3
4
5
6
7
8
9
10
<ul>
  <li class="active">
    <a href="#">text<span></span></a>
  </li>
  <li>
    <a href="#">text<span></span></a>
  </li>
  <li>
    <a href="#">text<span></span></a>
  </li>

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

Сообщение от mrtoxas

Я выше дал такой код. Квадрат позиционируется относительно ссылки.
Или все равно не то?

Ваш вариант верный. Не понимаю, почему у меня не работало свойство relative...
В этом случае возникает еще вопрос использовани вложенного блочного элемента в строчный...

@mrtoxas · 12.11.2016, 13:57

CSS
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
.list {
  list-style: none;
  overflow: hidden;
}
.list__item {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightgray;
  text-align: center;
  position: relative;
}
.list__link {
  display: block;
  line-height: 100px;
  position: relative;
  z-index: 2;
}
.list__item_active:after,
.list__item:hover:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  right: 0;
  background-color: red;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
<ul class="list">
  <li class="list__item list__item_active">
    <a class="list__link" href="#">text</a>
  </li>
  <li class="list__item">
    <a class="list__link" href="#">text</a>
  </li>
  <li class="list__item">
    <a class="list__link" href="#">text</a>
  </li>
</ul>

Или так:

CSS
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
.list {
  list-style: none;
  overflow: hidden;
}
.list__item {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightgray;
  text-align: center;  
}
.list__link {
  display: block;
  line-height: 100px;
  position: relative;
}
.list__item_active .list__link:after,
.list__link:hover:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  right: 0;
  background-color: red;
}

Если вы хотите со вложенным в ссылку блоком, тогда:

CSS
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
.list {
  list-style: none;
  overflow: hidden;
}
.list__item {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightgray;
  text-align: center;  
}
.list__link {
  display: block;
  line-height: 100px;
  position: relative;
}
.list_marker{
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  right: 0;
  background-color: red;
  display: none;
}
.list__link:hover .list_marker,
.list__item_active .list_marker{
  display:block;
}
.list__link:hover,
.list__item_active .list__link{
  background-color:gray;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="list">
  <li class="list__item list__item_active">
    <a class="list__link" href="#">text    
      <div class="list_marker"></div>
    </a>
  </li>
  <li class="list__item">
    <a class="list__link" href="#">text    
      <div class="list_marker"></div>
    </a>
  </li>
  <li class="list__item">
    <a class="list__link" href="#">text    
      <div class="list_marker"></div>
    </a>
  </li>
</ul>

@СергейСереб · 12.11.2016, 14:58 **[ТС]**

Добавлено через 14 минут
А для чего тут overflow:hidden?

Добавлено через 46 секунд

Сообщение от mrtoxas

Если вы хотите со вложенным в ссылку блоком, тогда:

Я не то, чтобы хочу... Я не понимаю, таки допустимо такое или нет..

@mrtoxas · 12.11.2016, 15:32

Сообщение от СергейСереб

А для чего тут overflow:hidden?

Для очистки потока после float.

Сообщение от СергейСереб

Я не понимаю, таки допустимо такое или нет..

До сих пор не понимаете? Смотрите внимательно в мои примеры. Все, что в них есть - допустимо.

И ответ на главный вопрос темы:

Сообщение от СергейСереб

Можно ли использовать свойство position для строчных элементов, преобразованных в блочные?

Да, можно.

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	12.11.2016, 01:33
	Не совсем понятно. Когда вы задаете строчному элементу абсолютное позиционирование, он становится блочным. 0

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076
	12.11.2016, 01:35 [ТС]
	мне нужно строчному задать отностельное позиционирование. Самое постое позиционирование блока в блоке. Но тот, в котором позиционируется - должен быть строчный строчный Результат как на картинке. Но чем проще и короче запись в HTML и CSS - тем лучше. Я пытался без обертки, просто переопределенному тегу "а" задать относительное позиционирование - не работает. 0

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076
	12.11.2016, 01:43 [ТС]
	работает... Но мне строчный блок(всмысле, который был строчным) нужно относительно спозиционировать 0

Можно ли использовать свойство position для строчных элементов?

Решение