Meta tags:
description= Como usar a propriedade CSS right para definir a posição direita de um elemento. Veja os valores da propriedade em uso e pratique.;
Headings (most frequently used words):
right, exemplo, com, valor, em, propriedade, css, como, funciona, sintaxe, exemplos, valores, propriedades, relacionadas, prática, vs, left, px, resultado, initial,
Text of the page (most frequently used words):
right (41), border (34), css (28), text (24), elemento (21), style (21), color (21), width (21), position (20), font (20), borda (18), direita (18), grid (18), para (16), html (16), aprender (15), left (15), com (14), background (14), propriedade (13), column (13), valor (12), top (11), bottom (10), auto (10), break (10), w3docs (9), posição (9), title (9), image (9), animation (9), absolute (8), experimente (8), height (8), stroke (8), div (7), overflow (7), decoration (7), offset (7), flex (7), como (6), page (6), uma (6), desloca (6), esquerda (6), initial (6), body (6), head (6), line (6), align (6), padding (6), margin (6), type (6), variant (6), valores (5), seu (5), que (5), define (5), padrão (5), você (5), transition (5), last (5), outline (5), radius (5), child (5), formatter (5), todos (4), generator (4), prática (4), propriedades (4), sintaxe (4), tem (4), efeito (4), quando (4), fixed (4), relative (4), static (4), distância (4), contentor (4), ela (4), qual (4), deslocamento (4), mesmo (4), copiar (4), property (4), max (4), img (4), mode (4), transform (4), fill (4), size (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), exemplos (3), funciona (3), this (3), sticky (3), direção (3), bloco (3), texto (3), sua (3), length (3), example (3), the (3), document (3), doctype (3), exemplo (3), media (3), default (3), contêiner (3), object (3), não (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), letter (3), content (3), columns (3), direction (3), clip (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), snippets (2), web (2), relacionadas (2), scroll (2), behavior (2), resize (2), outros (2), elementos (2), usada (2), superior (2), específica (2), tela (2), função (2), inherit (2), permitindo (2), navegador (2), automaticamente (2), negativos (2), são (2), permitidos (2), some (2), out (2), deslocamentos (2), caixa (2), 146 (2), logo (2), alt (2), https (2), api (2), uploads (2), 0001 (2), 0710cad7a1017902166203def268a0df2a5fd545 (2), png (2), src (2), medida (2), resultado (2), normal (2), página (2), animável (2), horizontal (2), defina (2), somente (2), prevalece (2), ignorado (2), cada (2), definir (2), quanto (2), depende (2), rolagem (2), partir (2), posicionado (2), referência (2), uso (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, desde, 2014, next, previous, yes, was, helpful, verificar, pode, afetar, posicionar, mover, linha, inteira, habitual, inferior, das, quatro, funcionam, conjunto, herda, pai, calcule, rem, etc, desta, descrição, lorem, ipsum, lipsum, sometimes, known, dummy, used, laying, print, graphic, designs, lightgreen, 300, redefine, posicione, base, nos, tamanho, element, 120, ffffff, ccc, 100, 150, percentual, resolvido, relação, portanto, mantém, proporcional, redimensionado, largura, aqui, imagem, retirada, fluxo, fixada, 35px, percentage, 50px, dom, css2, versão, sim, herdado, posicionados, aplicável, inicial, precisar, apenas, deixe, outro, fixo, dois, criariam, restrição, excessiva, expande, satisfazer, útil, fixar, lado, ambos, tanto, escrita, for, primeiro, informação, nenhum, gruda, durante, pela, quantidade, indicada, enquanto, espaço, ele, originalmente, ocupava, preservado, nome, contra, intuitivo, positivo, move, longe, seja, entre, ancestral, mais, próximo, viewport, inteiramente, esta, explica, comporta, esquema, posicionamento, interage, erros, comuns, evitar, fica, distante, por, recebe, diferente, usar, veja, pratique, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, checked, active, seletores, selectors, css3, guia, flexbox, guides, gradientes, nomes, cores, tabelas, links, class, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,
Text of the page (random words):
propriedade css right w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedade css right como usar a propriedade css right para definir a posição direita de um elemento veja os valores da propriedade em uso e pratique a propriedade css right define o deslocamento horizontal de um elemento posicionado o quanto a sua borda direita fica distante de uma borda de referência por si só ela não tem efeito só funciona quando o elemento recebe um valor de position diferente do padrão static esta página explica como right se comporta em cada esquema de posicionamento como ela interage com left e os erros comuns a evitar como right funciona a borda de referência a partir da qual right é medida depende inteiramente do valor de position do elemento absolute ou fixed right é a distância entre a borda direita do elemento e a borda direita do seu bloco contentor para absolute o ancestral posicionado mais próximo para fixed o viewport relative right desloca o elemento para a esquerda a partir de sua posição normal pela quantidade indicada enquanto o espaço que ele originalmente ocupava é preservado o nome é contra intuitivo um valor positivo de right move o elemento para longe da direita ou seja para a esquerda sticky right é a distância da borda direita do contêiner de rolagem na qual o elemento gruda durante a rolagem static right não tem nenhum efeito i informação se position for static o padrão right é ignorado defina position relative absolute fixed ou sticky primeiro right vs left se você definir tanto left quanto right no mesmo elemento o resultado depende do width e da direção de escrita com width auto o elemento se expande para satisfazer ambos os deslocamentos útil para fixar um elemento a uma distância específica de cada lado do seu contêiner com um width fixo os dois criariam uma restrição excessiva na caixa em texto da esquerda para a direita left prevalece e right é ignorado em texto da direita para a esquerda right prevalece quando você precisar de apenas um deslocamento horizontal defina somente left ou somente right e deixe o outro como auto valor inicial auto aplicável a elementos posicionados herdado não animável sim a posição do elemento é animável versão css2 sintaxe dom object style right 50px sintaxe right auto length percentage initial inherit copiar exemplos exemplo com valor em px aqui a imagem é retirada do fluxo normal com position absolute e fixada a 35px da borda direita da página doctype html html head title title of the document title style img position absolute right 35 px style head body h2 right property example h2 img src https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png alt w3docs logo width 146 height 41 body html copiar experimente você mesmo resultado exemplo com valor em um valor percentual é resolvido em relação à largura do bloco contentor portanto right 30 mantém o deslocamento proporcional à medida que o contêiner é redimensionado doctype html html head title title of the document title style div height 150 px width 100 background color ccc color ffffff img position absolute right 30 top 120 px style head body h2 right property example h2 img src https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png alt w3docs logo width 146 height 41 div this is some div element div body html copiar experimente você mesmo exemplo com o valor initial initial redefine right para seu valor padrão de auto permitindo que o navegador posicione a borda direita automaticamente com base nos outros deslocamentos e no tamanho da caixa doctype html html head title title of the document title style div position relative max width 300 px line height 20 px p position absolute right initial background color lightgreen style head body h2 right property example h2 div lorem ipsum or lipsum as it is sometimes known is dummy text used in laying out print graphic or web designs p some text p div body html copiar experimente você mesmo valores valor descrição experimente auto define a posição da borda direita é o valor padrão desta propriedade experimente length define a posição da borda direita com px em rem etc valores negativos são permitidos experimente define a posição da borda direita com do elemento contentor valores negativos são permitidos experimente initial define a propriedade com seu valor padrão auto permitindo que o navegador calcule a posição automaticamente experimente inherit herda a propriedade do elemento pai propriedades relacionadas a propriedade right é uma das quatro propriedades de deslocamento que funcionam em conjunto com position left desloca a borda esquerda do elemento top desloca a borda superior do elemento bottom desloca a borda inferior do elemento prática prática qual é a função da propriedade right no css qual é a função da propriedade right no css é usada para mover um bloco ou uma linha inteira de texto para a direita de sua posição habitual ela desloca a borda direita de um elemento em direção à direita da tela ela desloca a borda direita de um elemento em direção à esquerda da tela é usada para posicionar a borda superior de um elemento a uma distância específica da borda direita de seu elemento contentor pode afetar a posição de outros elementos só tem efeito quando a propriedade position é static só tem efeito quando a propriedade position é absolute fixed relative ou sticky verificar was this page helpful yes no previous resize next scroll behavior on this page como right funciona sintaxe exemplos valores propriedades relacionadas prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores
|
