Вопросы Теги

Как я располагаю одно изображение сверху другого в HTML?

Другое событие NullPointerException возникает, когда объявляется массив объектов, а затем сразу же пытается разыменовать его внутри. 

String[] phrases = new String[10];
String keyPhrase = "Bird";
for(String phrase : phrases) {
    System.out.println(phrase.equals(keyPhrase));
}

Этот конкретный NPE можно избежать, если порядок сравнения отменяется ; а именно, использовать .equals для гарантированного непустого объекта.

Все элементы внутри массива инициализируются их общим начальным значением ; для любого типа массива объектов, это означает, что все элементы null.

Вы должны инициализировать элементы в массиве перед доступом или разыменованием их. 

String[] phrases = new String[] {"The bird", "A bird", "My bird", "Bird"};
String keyPhrase = "Bird";
for(String phrase : phrases) {
    System.out.println(phrase.equals(keyPhrase));
}

238
задан computingfreak 19 September 2016 в 00:49
поделиться

6 ответов

Хорошо, через какое-то время я обнаружил вот что: 

 .parent {position: relative;  верх: 0;  слева: 0;  } .image1 {позиция: относительная;  верх: 0;  слева: 0;  } .image2 {позиция: абсолютная;  верх: 30 пикселей;  слева: 70 пикселей;  }

Как простейшее решение. То есть:

Создайте относительный div, который помещается в поток страницы; поместите базовое изображение первым как относительное, чтобы div знал, насколько он должен быть большим; разместите наложения как абсолютные относительно левого верхнего угла первого изображения. Уловка состоит в том, чтобы правильно определить родственников и абсолютов.

417
ответ дан 23 November 2019 в 03:21
поделиться

Это - базовый взгляд на то, что я сделал для плавания одного изображения по другому. 

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

Источник

73
ответ дан Nhan 23 November 2019 в 03:21
поделиться

Вот код, который может дать Вам идеи: 

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

я подозреваю, что решение Espo может быть неудобным, потому что это требует, чтобы Вы расположили оба изображения абсолютно. Можно хотеть, чтобы первый расположил себя в поток.

Обычно, существует естественный способ сделать, который является CSS. Вы помещаете положение: родственник на контейнерном элементе, и затем абсолютно дети положения в нем. К сожалению, Вы не можете поместить одно изображение в другом. Вот почему мне было нужно контейнерное отделение. Заметьте, что я сделал его плаванием, чтобы заставить его автосоответствовать к его содержанию. То, чтобы заставлять его отобразиться: встроенный блок должен теоретически работать также, но поддержка браузера плоха там.

РЕДАКТИРОВАНИЕ: Я удалил атрибуты размера из изображений, чтобы проиллюстрировать мой тезис лучше. Если Вы хотите, чтобы контейнерное изображение имело свои размеры по умолчанию, и Вы не знаете размера заранее, Вы не можете использовать фоновый прием . Если Вы делаете, это - лучший способ пойти.

39
ответ дан Community 23 November 2019 в 03:21
поделиться

Простой способ сделать это состоит в том, чтобы использовать фоновое изображение, тогда просто помещает < img> в том элементе.

другой способ сделать использует слои CSS. Существует тонна ресурсы, доступные, чтобы помочь Вам с этим, просто искать слои CSS .

5
ответ дан Chris Bartow 23 November 2019 в 03:21
поделиться

Встроенный стиль только для ясности здесь. Используйте реальную таблицу стилей CSS. 

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>
5
ответ дан Community 23 November 2019 в 03:21
поделиться

@buti-oxa: Не быть педантичным, но Ваш код недопустимо. Атрибуты HTML width и height не допускают единицы; Вы, вероятно, думаете о свойствах CSS width: и height:. Необходимо также обеспечить тип контента (text/css; посмотрите код Espo) с эти <style> тег. 

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

Отъезд px; в width и height атрибуты могли бы заставить механизм визуализации уклоняться.

0
ответ дан Sören Kuklau 23 November 2019 в 03:21
поделиться