Last update: 28.04.2016

CSS provides element positioning capabilities, meaning we can place an element at a specific location on the page.

The main property that controls positioning in CSS is the position property. This property can take one of the following values:

static : standard element positioning, default value

absolute : the element is positioned relative to the bounds of the container element if its position property is not static

relative : The element is positioned relative to its default position. Typically, the main purpose of relative positioning is not to move an element, but to establish a new anchor point for the absolute positioning of its nested elements

fixed : the element is positioned relative to the browser window, this allows you to create fixed elements that do not change position when scrolled

You should not simultaneously apply the float property and any positioning type other than static (that is, the default type) to an element.

Absolute positioning

The browser's viewing area has a top, bottom, right, and left edge. Each of these four edges has a corresponding CSS property: left, right, top, and bottom. The values ​​for these properties are specified in pixels, ems, or percentages. It is not necessary to set values ​​for all four sides. As a rule, only two values ​​are set - the indent from the top edge top and the indent from the left edge left.

Block layout in HTML5 .header ( position: absolute; left: 100px; top: 50px; width: 430px; height: 100px; background-color: rgba(128, 0, 0, 0.5); )

HELLO WORLD

Here's a div element with absolute positioning will be 100 pixels to the left of the viewport border and 50 from the bottom.

It is not so important that after this div element there are some other elements. This div block will in any case be positioned relative to the boundaries of the browser viewport.

If an element with absolute positioning is located in another container, which, in turn, has a position property value not equal to static , then the element is positioned relative to the boundaries of the container:

Positioning in HTML5 .outer ( position: absolute; left: 80px; top: 40px; width: 430px; height: 100px; border: 1px solid #ccc; ) .inner( position: absolute; left: 80px; top: 40px; width : 50px; height: 50px; background-color: rgba(128, 0, 0, 0.5); )

Relative positioning

Relative positioning is also specified using the relative value. To specify the specific position to which the element is shifted, the same top, left, right, bottom properties are used:

Positioning in HTML5 .outer ( position: relative; left: 80px; top: 40px; width: 300px; height: 100px; border: 1px solid #ccc; ) .inner( position: absolute; left: 80px; top: 40px; width : 50px; height: 50px; background-color: rgba(128, 0, 0, 0.5); )

z-index property

By default, when two elements have the same border, the element that is last defined in the html markup is displayed on top of the other. However, the z-index property allows you to change the order of elements when they are overlaid. The property takes a number as its value. Elements with a larger z-index value will appear on top of elements with a smaller z-index value.

For example:

Positioning in HTML5 body( margin:0; padding:0; ) .content( position: relative; top: 15px; left: 20px; width: 250px; height: 180px; background-color: #eee; border: 1px solid #ccc ; ) .redBlock( position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; ) .blueBlock( position: absolute; top: 80px; left: 80px; width: 80px ; height: 80px; background-color: blue; )

Now let’s add a new rule to the redBlock block style:

RedBlock( z-index: 100; position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; )

Here the z-index is 100. But it doesn’t have to be the number 100. Since the second block has an undefined z-index and is actually zero, for redBlock we can set the z-index property to any value greater than zero.

And now the first block will overlap the second, and not vice versa, as was the case in the beginning.

The HTML tag is used for embedding an object within an HTML document. Use this tag to embed multimedia in your web pages.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

• onabort
• cancel
• onblur
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• ended
• onerror
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onscroll
• onseeked
• onseeking
• onselect
• onshow
• installed
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• onwaiting

For a full explanation of these attributes, see.

Let's say a few more words about registering ActiveX components. Typically, BASIC independently registers all ActiveX components at the time of their creation. Registration consists of assigning a special unique identifier CLSID to the ActiveX component and entering it into the registry Windows database Registry of several entries characterizing the properties of the component and its location. We have already talked a little about registering programs in the sections on COM and DCOM. Regarding the distribution and dissemination of developed ActiveX components across local network or the Internet, then this is a separate topic and will be discussed below.

Rice. 1.11. Using a pre-built ActiveX control in the browser

Placing ActiveX controls on Web pages
ActiveX controls are connected to HTML documents using the tag, which is proposed in one of the working standards of the W3 consortium. The purpose of this tag (in Netscape Navigator) is to integrate foreign elements into HTML. Here is the complete tag syntax:

Some of the listed attributes are similar to the attributes of the well-known tag , so we will not consider them here.

Here is a description of tag-specific attributes:
CIASSID=URL
This attribute specifies the class identifier of the control element being called. Each OCX module, and therefore each ActiveX control, must have its own unique class identifier. It is usually abbreviated CLSID and is a fairly long string of hexadecimal digits - for example, "017C99A0-8637-llCF-A3A9-00A0C9034 920".

But why is there "URL" in the syntax of this attribute? The fact is that the tag can be used to connect not only ActiveX controls, but also other program objects, including those that are recognized not by “class identifiers”, but in some other way.
To ensure that the browser only deals with one syntax, the CLSID is set according to the rules of the URL: the left side contains the word "clsid", and the right side contains the actual class identifier.
Example: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
This attribute specifies the URL (this time a real one, with the prefix "http:" or "ftp:"). You can list multiple URLs in this attribute in case one of the servers is unavailable for some reason.
The same attribute allows you to specify the required version number for ActiveX controls.
For example, if you write CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
then an attempt to get this module ActiveX from the Internet is attempted not only when it is not on the user's computer, but also when the control element is installed, but has more old number version than the one specified in the CODEBASE attribute (In our example, a version no older than 4.72.0.1171 is required).

CODETURE=MIME-type
TYPE=MIME-type
These two optional attributes allow you to specify the types (in terms of the MIME standard) of those files that are referenced by the CLASSID (CODETYPE attribute) and DATA (TYPE attribute) attributes. For ActiveX controls, the CODETYPE attribute, if present, must be set to "application/x-oleobject".

DATA=URL
This attribute specifies the location of the data file that may be needed for this control to operate. For some ActiveX controls, this attribute is required. In addition, using the DATA attribute, you can include the file containing the control element directly in the HTML file in encoded form.

DECLARE
Typically this statement is empty. It can be used to declare an object when it is not implemented, but is only a parameter of another object. At the same time, the entire set of object attributes is written to the browser’s memory in case someone requires them.

ID=id
Needed to organize interaction with other objects that have an identifier. It can also be used in a URL addressing scheme (that is, it can appear after the "#" character in a URL).
You can create as many tags as you like with the same CLASSID value, but their ID values ​​must be different.

NAME=id
An optional attribute that can be used when preparing an HTML form (for this, the tag must be inside a tag pair ... ). The data sent will contain the information received by the browser from the object.

SHAPES
This empty attribute makes it possible, within the window occupied by the object in the browser space, to select additional subareas and mark them as additional URL links (a kind of hotspots). The coordinates of these regions and the URLs of links for them are specified using tags with special additional attributes, which must be located between the AND corresponding to it.

In this lesson we will learn about the tag. Its main purpose is to embed some objects into an HTML page that the browser is not able to recognize. For example, it could be a flash game, images, audio, video, java applets, activeX elements, PDF.

HTML tag syntax

... [] ...

In the attributes section there are very important parameters for the operation of the object (we will look at their meanings with examples below). Moreover, there are only two mandatory ones: type and data . Between the closing and opening object tags, you can set parameters for the connected object (if, of course, they are needed) via .

Tag Attributes 1. Align

Align - is responsible for aligning the object relative to other page elements.

For example

VALUE can take the following values:

• absmiddle - align to the middle of the current line
• baseline , middle - alignment to the baseline of the current line
• bottom (default) - aligns the bottom border of the object with the surrounding text
• left - object location on the left
• right - object location on the right
• top - align to the highest element of the current line

2.Classid

Classid - tells the browser which program, plugin or applet to load. This program will further work with the object

For example

Instead of a URL, you can write either an absolute or a relative address.

3.Data

Data is the most important argument because it specifies the address of the object.

For example

The object address is specified depending on whether we specified codebase. If codebase is not specified, then the object address is specified relative to the part of the directory in which we are located. I would recommend specifying the full address of the object.

4. Height and Width

Height and Width - set the height and width of the object, respectively. Can be specified both in pixels and percentages. If we set it as a percentage, then the values ​​are calculated based on the allowed area.

For example

5. Type

Type - defines the MIME type of the data specified in the data attribute. It is needed for the browser to prepare the necessary resources. Most often its value is exactly "application/x-shockwave-flash".

If the browser does not support objects (this often happens if the Adobe flash player is not installed), then inside the tag you can specify text that will inform the user that it is impossible to load the object.

For example

Sorry, the object cannot be displayed Note 1

The IE browser may not understand the data value correctly, so you should specify the file address again in the param tags:

Example: clock using object

Using the object, you can easily display multimedia objects and elements. The simplest and most obvious example is a watch.

The demo shows the bridge between 2D graphics in HTML5 and true 3D (using WebGL). The purpose of this article is to show how to draw 3D objects using a polygonal mesh. A polygonal mesh is a collection of vertices, edges, and faces that define the shape of polyhedral objects in 3D computer graphics and solid modeling.

Simple 3D objects

The facade consists of triangles, quadrangles or other simple polygons. To demonstrate this, we prepared simple 3D objects - a cube and polyhedral spheres (with a variable number of faces).

Draw 3D Objects Step 1: HTML

As usual (for all canvas based demos) we have a very simple HTML markup(with one object inside, canvas):

Wireframe 3D Objects in HTML5 Use Up/Down Buttons to Control Object Transparency

Retrieving object initialization, see:

//var obj = new cube(); //var obj = new sphere(6); var obj = new sphere(16);

This means that if we need to display a cube, you must uncomment the first line, if you want to display a sphere with 6 faces, you need to select the second option.

Step 2. JS

There are three JavaScript files (main.js, meshes.js and transform.js), we are publishing two of them, the third (transform.js) contains only calculation functions related to rotation, scaling and project objects. So let's look at the first JavaScript code:

js/meshes.js // Get a random color function getRandomColor() ( var letters = "0123456789ABCDEF".split(""); var color = "#"; for (var i = 0; i< 6; i++) { color += letters; } return color; } // Подготовка объекта function prepareObject(o) { o.colors = new Array(); // Составим норм o.normals = new Array(); for (var i = 0; i < o.faces.length; i++) { o.normals[i] = ; o.colors[i] = getRandomColor(); } // Составим центр: рассчитать максимальные позиции o.center = ; for (var i = 0; i < o.points.length; i++) { o.center += o.points[i]; o.center += o.points[i]; o.center += o.points[i]; } // Составим расстояния o.distances = new Array(); for (var i = 1; i < o.points.length; i++) { o.distances[i] = 0; } // Вычисляем среднее положение центра o.points_number = o.points.length; o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.faces_number = o.faces.length; o.axis_x = ; o.axis_y = ; o.axis_z = ; } // Объект куб function cube() { // Подготовим точки и граней куба this.points=[ , , , , , , , , , , ]; this.faces=[ , , , , , , , , , , , , , , , , ]; prepareObject(this); } // Объект сфера function sphere(n) { var delta_angle = 2 * Math.PI / n; // Составим вершины (точек) сферы var vertices = ; for (var j = 0; j < n / 2 - 1; j++) { for (var i = 0; i < n; i++) { vertices = ; vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle); vertices = 100 * Math.cos((j + 1) * delta_angle); vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle); } } vertices[(n / 2 - 1) * n] = ; vertices[(n / 2 - 1) * n + 1] = ; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n] = 100; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n + 1] = 0; vertices[(n / 2 - 1) * n + 1] = -100; vertices[(n / 2 - 1) * n + 1] = 0; this.points = vertices; // Составим первый слой var faces = ; for (var j = 0; j < n / 2 - 2; j++) { for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = j * n + i; faces = j * n + i + 1; faces = (j + 1) * n + i + 1; faces = j * n + i; faces = (j + 1) * n + i + 1; faces = (j + 1) * n + i; } faces = ; faces = ; faces = (j + 1) * n - 1; faces = (j + 1) * n; faces = j * n; faces = (j + 1) * n - 1; faces = j * n + n; faces = (j + 2) * n - 1; } for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = (n / 2 - 1) * n; faces = i; faces = i + 1; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n + i + 1; faces = (n / 2 - 2) * n + i; } faces = ; faces = ; faces = (n / 2 - 1) * n; faces = n - 1; faces = 0; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n; faces = (n / 2 - 2) * n + n - 1; this.faces=faces; prepareObject(this); }

At the very beginning, we must prepare all the points and the façade of our objects. There are 2 functions: cube (which generates initial arrays for a simple cube object) and spheres (for generating a sphere). It is much more difficult to calculate all the points and faces for a polyhedral sphere. Once we have all these points and surfaces, we must calculate other parameters (such as distance, absolute center and three axes).

// Internal variables var canvas, ctx; var vAlpha = 0.5; var vShiftX = vShiftY = 0; var distance = -700; var vMouseSens = 0.05; var iHalfX, iHalfY; // Initialization function sceneInit() ( // Preparing the canvas and object context canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = canvas.height / 2; // Initial scale and translation scaleObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Connect to the event handler document. onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Main loop setInterval(drawScene, 25); ) // Event handler OnKeyDown function handleKeydown(e) ( kCode = ((e.which) || (e.keyCode)); switch (kCode) ( case 38: vAlpha = (vAlpha = 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Down key ) ) // OnMouseMove event handler function handleMousemove(e) ( var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; if ((x > 0) && (x< canvas.width) && (y >0) && (y< canvas.height)) { vShiftY = vMouseSens * (x - iHalfX) / iHalfX; vShiftX = vMouseSens * (y - iHalfY) / iHalfY; } } // Рисуем основную функцию function drawScene() { // Очистить холст ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Установить цвет заливки, цвет обводки, толщину линии и глобальной альфа- ctx.strokeStyle = "rgb(0,0,0)"; ctx.lineWidth = 0.5; ctx.globalAlpha= vAlpha; // Вертикальный и горизонтальный поворот var vP1x = getRotationPar(, , vShiftX); var vP2x = getRotationPar(, , vShiftX); var vP1y = getRotationPar(, , vShiftY); var vP2y = getRotationPar(, , vShiftY); rotateObj(vP1x, vP2x, obj); rotateObj(vP1y, vP2y, obj); // Пересчитываем расстояния for (var i = 0; i < obj.points_number; i++) { obj.distances[i] = Math.pow(obj.points[i],2) + Math.pow(obj.points[i],2) + Math.pow(obj.points[i], 2); } // Подготовить массив с фасадом треугольников (с расчетом максимальное расстояние для каждой грани) var iCnt = 0; var aFaceTriangles = new Array(); for (var i = 0; i < obj.faces_number; i++) { var max = obj.distances]; for (var f = 1; f < obj.faces[i].length; f++) { if (obj.distances[f]] >max) max = obj.distances[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max); ) aFaceTriangles.sort(sortByDistance); // Prepare an array with predicted points var aPrjPoints = new Array(); for (var i = 0; i< obj.points.length; i++) { aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY); } // Нарисовать объект (поверхность) for (var i = 0; i < iCnt; i++) { ctx.fillStyle = aFaceTriangles[i].faceColor; // Начало пути ctx.beginPath(); // Фасад индекс вершины var iFaceVertex = aFaceTriangles[i].faceVertex; // Переместить в исходное положение ctx.moveTo(aPrjPoints, aPrjPoints); // И нарисовать три линии (построить треугольник) for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) { ctx.lineTo(aPrjPoints], aPrjPoints]); } // Закрыть путь, и заполнить треугольник ctx.closePath(); ctx.stroke(); ctx.fill(); } } // Функция сортировки function sortByDistance(x, y) { return (y.distance - x.distance); } // Инициализация if (window.attachEvent) { window.attachEvent("onload", sceneInit); } else { if (window.onload) { var curronload = window.onload; var newonload = function() { curronload(); sceneInit(); }; window.onload = newonload; } else { window.onload = sceneInit; } }

Once the page is loaded, we do the main initialization (sceneInit function). We create a canvas and object context, which means we perform the initial scale and translate our objects that we created at the very beginning (a cube or a ball). We then attach event handlers to OnKeyDown and OnMouseMove and set a timer to render our main scene (the DrawScene function). Don't forget that we can change the globalAlpha parameters by pressing the Up/Down keys.