Вопросы Теги

Как наложить цвет над изображением [duplicate]

Если ваша проблема только показывает разрывы строк, вы можете сделать это с помощью CSS.

HTML 

Some test
with linebreaks

CSS 

.white-space-pre {
    white-space: pre-wrap;
}

jsfiddle https://jsfiddle.net/yk1angkz/125/

Примечание. Обратите внимание на форматирование и отступы кода, поскольку white-space: pre-wrap отобразит все пробелы (за исключением последней строки новой строки после текст, см. скрипку).

320
задан Kara 23 July 2013 в 23:49
поделиться

4 ответа

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

Это работает, потому что position: absolute означает что-то вроде «использовать top, right, bottom, left для размещения себя по отношению к ближайшему предку, у которого есть position: absolute или position: relative .

Итак, мы делаем #father для position: relative, а у детей есть position: absolute, затем используйте top и bottom для размещения детей.

587
ответ дан Domenic 22 August 2018 в 20:45
поделиться
  • 1
    большое спасибо. можете ли вы объяснить мне, как это работает, почему? – BlaShadow 7 May 2012 в 20:37
  • 2
    Почему #father { position: relative; } требуется? – joshreesjones 2 August 2014 в 06:18
  • 3
    требуется для изменения «правила позиции», для тех, кто внутри него. – BlaShadow 2 August 2014 в 18:28
  • 4
    @ mathguy54 Поскольку спецификация говорит, что абсолютно позиционированные элементы расположены относительно первого родившегося позиционированного , что означает любой родитель, у которого нет значения позиции static. – Alex W 7 August 2014 в 14:32
  • 5
    как насчет такого сценария: ОТЕЦ относительный, а его высота составляет 100%, как разместить сына и сына2, скажем, 20% и 70% от высоты отца соответственно? – Rossitten 8 March 2015 в 06:56 
div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}
23
ответ дан Eliran Malka 22 August 2018 в 20:45
поделиться
  • 1
    Что делать, если вам нужно изменить размер родителя с дочерним? – FrenkyB 7 September 2017 в 12:21

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

Пример 1 ::

http://jsfiddle.net/Cr9KB/1/ 

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Здесь родительский класс не имеет позиции, поэтому элемент помещается в соответствии с телом.

Пример 2 ::

http://jsfiddle.net / Cr9KB / 2 / 

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

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

6
ответ дан Mogsdad 22 August 2018 в 20:45
поделиться
  • 1
    И, что, если у вас нет #mainall {height: 150px} ...? Я имею в виду, если mainall имеет динамическую высоту? – Albert Català 8 September 2015 в 15:02
  • 2
    то ваш плавающий элемент будет относиться к позиции, которую родительский элемент имел при загрузке страницы (и css). Если вы хотите обновить это после загрузки страницы, используйте javascript - clientX и clientY - хорошее место для начала – Black_Stormy 21 March 2016 в 13:00

Инказы кто-то хочет расположить дочерний div непосредственно под родительским 

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Рабочее демо Codepen

4
ответ дан petergus 22 August 2018 в 20:45
поделиться