Изменение встроенного элемента img, чтобы он действовал как блочный элемент

Question

Изменение встроенного элемента img, чтобы он действовал как блочный элемент

0

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

Я пытаюсь заставить кнопку плавать над изображением. Я привел изображение в виде встроенного элемента, чтобы сохранить ссылку на PSD в Dreamweaver, вместо того, чтобы вносить его в качестве фонового изображения и для приложений атрибутов alt. Я предполагаю, что проблема заключается в том, что я хочу, чтобы встроенное изображение действовало как блок? Это правильно? Я смог заставить кнопку плавать по изображению, используя относительное позиционирование для кнопки и абсолютное позиционирование для изображения, но тогда я не могу сосредоточить все это на странице. Любой совет, который у вас есть, очень ценится!

CSS

#container {
    margin: auto;
    display: block;
}

#button {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    position: relative;
}

HTML

<body>

  <div id="container"><img src="index.jpg" width="1200" height="900" /></div> 

  <div id="button"></div>

</body>

user2833079 01 окт. 2013, в 03:28

Источник

0

Вы хотите синий фон поверх изображения - все это по центру экрана?
jbrya029 01 окт. 2013, в 01:00

Теги:

html

css

inline

1 ответ

Ещё вопросы

Вы хотите синий фон поверх изображения - все это по центру экрана?

jbrya029 · Answer 1 · 2013-09-30T22-45-00.000Z

Переместите свою кнопку div внутри своего содержимого div:

<div id="container"><img src="index.jpg" width="1000" height="900" /><div id="button"></div></div>

А затем измените свой контейнер на ширину вашего содержимого. Позиция установлена в относительную. Затем поместите кнопку внутри контейнера div с абсолютным, верхним и левым.

#container {
margin: auto;
display: block;
width:1200px;
position:relative;
}

#button {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top:0px; left:20px;
}