Как сделать у блока с position:absolute ширину родителя, а не по контенту?

Question

[red-web]

Задача есть поле ввода width=100%, при начале ввода выпадает подсказка.
Поле ввода находится в div ширина которого не известна, подсказка должна выпадать вниз, поверх контента и шириной родительского div.

Как у сделать блоку position:absolute ширину родителя, а не по контенту?

<div style="background-color:#ff0000;margin:300px;">
	<input type='text'>
	<div style="background-color:#ff00f1; position:fixed; width:100%; width:inherit;">
			<div>111</div>
			<div>222</div>
			<div>333</div>
			<div>444</div>
			<div>555</div>
			<div>666</div>
	</div>
</div>

Answer 1

[Александр Булгаков]

задать родителю position: relative

Answer 2

[Андрей]

еще вариация:

1) задать родителю position: relative
2) блоку position:absolute; left:0; right:0;

Answer 3

[red-web]

Вот рабочий вариант :)

<div style="background-color:#ff0000;margin:100px;position:relative">
	<input type='text'>
	<div style="background-color:#ff00f1; position:absolute; width:100%; left:0; z-index:100;">
			<div>111</div>
			<div>222</div>
			<div>333</div>
			<div>111</div>
			<div>222</div>
			<div>333</div>
			<div>111</div>
			<div>222</div>
			<div>333</div>
	</div>
</div>

Comments

[Александр Булгаков]

я надеюсь в рабочем проекте вы инлайновые задания стилей не используете?