Overlapping of Items

Is there the equivalent of “bring to front” or “Send to Back” or “Bring Forward” or “Send Backwards” of items placed on the page?

There are two ways to control the front-to-back order of items (in Xway and HTML/CSS):

  1. Items that are earlier in the flow order are normally further back than items that are later in the flow order. If you have two inflow boxes, the first box will be behind the second box if they overlap and don’t have a z-index. You can drag inflow boxes to reorder them on the page.
  2. You can set a z-index value (search for z-index in the User Guide).

Back-to-front order is mostly relevant to absolute-positioned items (“layers” in Freeway). However, you should be careful about using absolute-positioned items. It is tempting to use them when converting a (Freeway) table-layout design to an (Xway/Freeway) CSS design, but they are not a good replacement. Table layouts have been deprecated for many years, but they have the advantage of being vertically flexible. If someone views a table layout with a larger font size, boxes (table cells) will have their size and position adjusted so that they don’t overrun each other. That doesn’t happen with absolute-positioned boxes: absolute boxes are positioned independently of other (non-ancestor) items and it is very easy to end up with a design that only works if other people are using the same font and screen size. This is why Xway defaults to relative-positioned boxes, which are more suitable for flexible layout.

There are places where absolute boxes may be used appropriately (and sparingly), but it’s a good idea to test them with different screen/font sizes. They’re not used in the Xway tutorial.