HTML and CSS Reference
In-Depth Information
In Figure 2-25, you can see the full image on the left. On the right, the image is clipped.
Only the section of the source image as specified in the rect function assigned to the clip
property is visible. The following is the full code:
position: fixed;
left: 325px;
clip: rect(25px, 100px, 100px, 25px);
<img src="flowers.jpg" style="height: 200px;width: 300px;"/>
<img class="clipper" src="flowers.jpg" style="height: 200px;width:300px;"/>
The clip property works only on elements whose position is set as fixed or absolute.
Apply styles to establish and change an element's position
The browser provides a coordinate system for how to lay out elements on a page. The default
behavior is essentially a layout where the elements, without any other position attributes
specified, will simply lay out on the page in a default flow. In this context, the base coordinate
is the top left corner of the window which can be understood as (x,y) coordinate (0,0). This is
called static layout. CSS provides some mechanisms where you can override the default layout
of the page. This is achieved by specifying the desired position behavior with the position
property. Once the position property is set, other CSS properties such as top , left , bottom , or
right are set. In a static layout, the elements will not respond to the top , left , bottom , or right
properties. The positioning type must be specified.
For the exam, be sure you understand that each HTML element is a box and each box be-
gins its own new coordinate system. If you place a div element on the page at (50px,50px),
any elements placed inside it are not placed at a coordinate starting at (50px, 50px) just
because that is where the div element is. The child elements inside the div start at coor-
dinate (0,0), which is the top left corner of the div itself. All child elements are positioned
relative to the container in which they are placed.
The position property allows you to specify one of three different options: fixed , relative ,
or absolute . With fixed positioning, elements are placed relative to the browser window. With
Search WWH ::

Custom Search