I need to create 2 colored rectangles without using pictures and partially overlap them.

    2 answers 2

    For this purpose, z-index is intended, for example:

    <head> <style> #one { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; z-index: 1; background-color: red; } #two { position: absolute; left: 150px; top: 150px; width: 100px; height: 100px; z-index: 2; background-color: black; } </style> <head> <body> <div id="one"> </div> <div id="two"> </div> </body>

    will give the imposition of a black rectangle on red.

       <div class="color_1"></div> <div class="color_2"></div>

      css:

       .color_1,.color_2{ display:block; width:100px; /* ширина каждого блока */ height:100px; /* высота каждого блока */ position:relative; } .color_1{ background:#ffffff; /* фон, цвет белый */ left:0px;top:0px; /* позиция элемента относительно его текущей позиции */ } .color_2{ background:#000000; /* фон, цвет чёрный */ left:0px;top:0px; /* позиция элемента относительно его текущей позиции */ }