Scribd
Upload
106 views

Layers in CSS:: W T S T T F

CSS allows creating layers of HTML elements with pixel precision positioning. Positioning is defined using the position property (absolute or relative) and exact position using the top and left properties. The layering order is defined by the z-index property. Relative positioning positions elements relative to their insertion point in the HTML, while absolute positioning positions elements relative to the parent container or page. JavaScript can dynamically change layer positions and z-indexes.

Uploaded by

rajkumarbevara99
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
106 views

Layers in CSS:: W T S T T F

CSS allows creating layers of HTML elements with pixel precision positioning. Positioning is defined using the position property (absolute or relative) and exact position using the top and left properties. The layering order is defined by the z-index property. Relative positioning positions elements relative to their insertion point in the HTML, while absolute positioning positions elements relative to the parent container or page. JavaScript can dynamically change layer positions and z-indexes.

Uploaded by

rajkumarbevara99
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Layers in CSS:

With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular
page with pixel precision.

The advantages of this are obvious - but once again Netscape has very limited support of CSS
layers - and to top it off: the limited support it offers is quite often executed with failures.

So the real challenge when working with layers is to make them work on Netscape browsers as well.
To create a layer all you need to do is assign the position attribute to your style. The position can
be either absolute or relative.

The position itself is defined with the top and left properties.


Finally, which layer is on top is defined with the z-index attribute.

RELATIVE VERSUS ABSOLUTE POSITIONING


You can either position your layer calculated from the upper left corner(absolute) or calculated from
the position where the layer itself is inserted (relative).

position:absolute
If you define the position to be absolute it will be calculated from the upper left
corner of the page - unless the layer is defined inside another layer, in which case it
will be calculated from the upper left corner of the parent layer.

position:relative
If you define the position to be relative it will be relative to the position of the tag that
carries the style.
That is, if you add a relatively positioned layer in the middle of the page, then the
position will be calculated from that exact spot in the middle of your page where it
was added.

DEFINING THE POSITION


While the position property indicates the out spring of our coordinate system,
the left and top properties defines the exact position of our layer.

You can enter both positive and negative values for these properties - thus it is possible to place
content higher up and further to the left on the page than the logical position in the HTML code
where the layer itself is defined.

In other words: at the bottom of your HTML code you can enter the code for a layer that is
positioned at the top of the resulting page.
Both left and top properties can be dynamically changed with JavaScript.
This means that it is possible to move things around on the screen even after the page has finished
loading.

Example:

Program:

<html>
<body>
LAYER 1 ON TOP:
<div style="position:relative; font-size:50px; z-index:2;">
LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red;
font-size:80px; z-index:1">LAYER 2</div>

LAYER 2 ON TOP:
<div style="position:relative; font-size:50px; z-index:3;">
LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red;
font-size:80px; z-index:4">LAYER 2</div>
</body>
</html>

POSITION IN THE STACK - THE Z-INDEX


We used the z-index to put LAYER 1 on top in the first example, while we had LAYER 2 on top in the
second example.

Very interesting possibilities arise from the fact that the z-index can be dynamically changed with
JavaScript.We could create several "pages" on top of each other - all on the same page. When the
user clicks a link it will simply move the layer with the desired info on top rather than load a new
page.
Advantages of CSS:
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements in
all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more than
one type of device. By using the same HTML document, different versions of a website can
be presented for handheld devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

Disadvantages of CSS:

Advantages of JavaScript
 Speed. Client-side JavaScript is very fast because it can be run immediately within the client-
side browser. Unless outside resources are required, JavaScript is unhindered by network
calls to a backend server.
 Simplicity. JavaScript is relatively simple to learn and implement.

 Popularity. JavaScript is used everywhere on the web.

 Interoperability. JavaScript plays nicely with other languages and can be used in a huge
variety of applications.

 Server Load. Being client-side reduces the demand on the website server.

 Gives the ability to create rich interfaces.

Disadvantages of JavaScript
 Client-Side Security. Because the code executes on the users’ computer, in some cases it
can be exploited for malicious purposes. This is one reason some people choose to disable
Javascript.

 Browser Support. JavaScript is sometimes interpreted differently by different browsers. This


makes it somewhat difficult to write cross-browser code.

You might also like