[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fapplying-css-positioning-properties":671,"blog-author-\u002Fblog\u002Fapplying-css-positioning-properties":1370,"i-material-symbols:arrow-back-rounded":1382},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1356,"date":1357,"description":1358,"draft":1359,"editorsPick":1359,"extension":1360,"featured":1359,"image":1361,"imageAlt":1362,"meta":1363,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1364,"seo":1365,"stem":1366,"tags":1367,"__hash__":1369},"blog\u002Fblog\u002Fapplying-css-positioning-properties.md","Applying CSS Positioning Properties","Eze Thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-blogs-markdoc-nextjs\u002Fauthor.png",null,"eze-thankgod",{"type":679,"value":680,"toc":1341},"minimark",[681,685,690,693,697,700,729,733,736,766,770,773,778,795,798,805,815,822,825,832,835,841,847,850,854,866,870,887,899,922,925,931,937,940,946,949,955,961,964,970,973,980,986,992,995,1001,1004,1011,1017,1023,1025,1031,1034,1038,1056,1059,1062,1068,1074,1076,1082,1085,1091,1097,1103,1105,1111,1114,1120,1126,1132,1134,1139,1145,1151,1157,1163,1166,1172,1178,1183,1189,1195,1197,1202,1208,1212,1230,1233,1239,1248,1254,1260,1262,1267,1273,1277,1285,1288,1294,1297,1300,1306,1309,1315,1322,1326],[682,683,684],"p",{},"CSS positioning properties enhance the user experience on your page. Also, they allow you to position elements and contents on a web page differently. In this article, you’ll learn what CSS positioning properties are, the different CSS position property values, and how you can apply them to your web page.",[686,687,689],"h2",{"id":688},"what-is-the-position-property-in-css","What is the Position Property in CSS?",[682,691,692],{},"The CSS position property describes the type of positioning method used for an element and its placement on a web page. It helps you explicitly set a location, allowing you to move your elements around on the page. In addition, you can use the top, left, right, and bottom properties to give the document any look you want. For example, properties can place elements at the edge of the parent element or the viewport edge when the value of 0 is applied.",[686,694,696],{"id":695},"why-use-css-positioning","Why Use CSS Positioning?",[682,698,699],{},"We use positioning properties in CSS for many reasons:",[701,702,703,707,710,720,723,726],"ul",{},[704,705,706],"li",{},"To enhance your design skills and improve the user experience on your page",[704,708,709],{},"To specify where an element is displayed on the page",[704,711,712,713],{},"To give the ",[714,715,719],"a",{"href":716,"rel":717},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts",[718],"nofollow","design layout a compelling visual appeal",[704,721,722],{},"To enable you to exploit a component's location, allowing you to move your piece around the page",[704,724,725],{},"To make your design more accessible and understandable",[704,727,728],{},"To let you determine the final area of the element",[686,730,732],{"id":731},"how-to-use-position-property-in-css","How to Use Position Property in CSS",[682,734,735],{},"Before diving into this topic, you should realize that even without CSS, your HTML element already has predefined rules on how it should be displayed on a web page. Therefore, it’s important to understand how things are positioned by default before changing or bending them at will. Also, bear in mind that all HTML elements are static by default. Here is how the CSS positioning property works:",[701,737,738,741,744,763],{},[704,739,740],{},"The position property in CSS helps specify elements' positions on a web page.",[704,742,743],{},"Whether it will appear within the normal flow of a document or not all depends on the order.",[704,745,746,747,751,752,751,755,758,759,762],{},"The CSS positioning property works with the box offset properties ",[748,749,750],"code",{},"left",", ",[748,753,754],{},"right",[748,756,757],{},"top",", and ",[748,760,761],{},"bottom",", which describe the final position of elements by moving them in different directions.",[704,764,765],{},"Depending on your CSS position property values, the box offset properties must be placed first for the CSS position properties to work.",[686,767,769],{"id":768},"css-positioning-property-values","CSS Positioning Property Values",[682,771,772],{},"The CSS positioning property has several values that influence how it works. These include the following:",[774,775,777],"h3",{"id":776},"static-position","Static Position",[682,779,780,785,786,751,788,751,790,758,792,794],{},[714,781,784],{"href":782,"rel":783},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fposition",[718],"Static positioning"," exists in the normal flow of the page and rejects any box offset property; it is a default position. However, the ",[748,787,757],{},[748,789,761],{},[748,791,750],{},[748,793,754],{}," properties do not affect it. Note that an element with static positioning does not have a unique position. Instead, it is always set according to the normal flow of the page.",[682,796,797],{},"All HTML elements are static by default. Using this position, you cannot change the placement of elements on a page.",[682,799,800,801,804],{},"Let’s look at this example of a single ",[748,802,803],{},"div"," element with a static position:",[806,807,812],"pre",{"className":808,"code":810,"language":811},[809],"language-text","\u003C!DOCTYPE html>\n\u003Chtml>\n\n\u003Chead>\n  \u003Cstyle>\n    body {\n      background-color: #73AD21;\n    }\n\n    .box {\n      width: 400px;\n      height: 200px;\n      background-color: white;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\n\u003Cbody>\n  \u003Cdiv class=\"box\">\u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\n\u003C\u002Fhtml>\n","text",[748,813,810],{"__ignoreMap":814},"",[682,816,817],{},[714,818,821],{"href":819,"rel":820},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=871f4db05c",[718],"Save this code",[682,823,824],{},"Here is the result of the above code:",[682,826,827],{},[828,829],"img",{"alt":830,"src":831},"The result of some HTML that shows a white rectangle on a green background","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-001.png",[682,833,834],{},"Now, let's try to move it around with the left property:",[806,836,839],{"className":837,"code":838,"language":811},[809]," .box {\n      width: 400px;\n      height: 200px;\n      background-color: white;\n      position: static;\n      left: 70px;\n    }\n",[748,840,838],{"__ignoreMap":814},[682,842,843],{},[714,844,821],{"href":845,"rel":846},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=4b4f468499",[718],[682,848,849],{},"Here is the result of the above:",[682,851,852],{},[828,853],{"alt":830,"src":831},[682,855,856,857,751,859,751,861,758,863,865],{},"Notice that there is no difference in the image. Static positioning is not affected by the ",[748,858,757],{},[748,860,761],{},[748,862,750],{},[748,864,754],{}," properties.",[774,867,869],{"id":868},"css-relative-position","CSS Relative Position",[682,871,872,877,878,751,880,751,882,758,884,886],{},[714,873,876],{"href":874,"rel":875},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fposition#:~:text=A%20relatively%20positioned%20element%20is,properties%20specify%20the%20horizontal%20offset.",[718],"Relative position"," is an element relative to its normal position on the page. However, the setting of a relatively-positioned element's ",[748,879,757],{},[748,881,754],{},[748,883,761],{},[748,885,750],{}," properties affect its normal page position. However, any space left by the relative element will not allow any content to adjust to fit. This is because the gap bounds them in the document. Therefore, when the element with a relative position moves, no part of anything else is influenced on the screen. Still, it is as if the element kept its position on the screen and everything else flows around it as if it had never moved.",[682,888,889,890,751,892,751,894,758,896,898],{},"Note that changing the position property does nothing. It only starts doing something when you use one of the coordinating properties. Therefore, you set the movement values using ",[748,891,757],{},[748,893,761],{},[748,895,750],{},[748,897,754],{}," to cancel the box close to the current position of the element you are moving. It's essential to note that the movement of the components works opposite of the order given and not the direction of the movement set. For example:",[701,900,901,907,912,917],{},[704,902,903,904,906],{},"Set the positive value for the ",[748,905,750],{}," property to move an element to the right.",[704,908,903,909,911],{},[748,910,754],{}," property to move an element to the left.",[704,913,903,914,916],{},[748,915,761],{}," property to move an element up.",[704,918,903,919,921],{},[748,920,757],{}," property to move an element down.",[682,923,924],{},"We’ll be centering the parent element in order to explain relative positioning. With this, it’s easier to understand the movement of what we will be doing:",[806,926,929],{"className":927,"code":928,"language":811},[809],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cstyle>\n        .parent {\n            background-color: #73AD21;\n            border: solid 3px blue;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 500px;\n        }\n\n        .box1 {\n            width: 200px;\n            height: 100px;\n            background-color: white;\n        }\n\n        .box2 {\n            width: 200px;\n            height: 100px;\n            background-color: yellow;\n        }\n\n        .box3 {\n            width: 200px;\n            height: 100px;\n            background-color: red;\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv class=\"parent\">\n        \u003Cdiv class=\"box1\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"box2\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"box3\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[748,930,928],{"__ignoreMap":814},[682,932,933],{},[714,934,821],{"href":935,"rel":936},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=0e5d47ac0b",[718],[682,938,939],{},"Here is the result:",[682,941,942],{},[828,943],{"alt":944,"src":945},"The result of some HTML that shows white, yellow, and red rectangles on a green background with a blue border. Showing CSS positioning property","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-003.png",[682,947,948],{},"Now, let’s add the position property CSS relative to our code to move the box around:",[806,950,953],{"className":951,"code":952,"language":811},[809],"\u003C!DOCTYPE html>\u003Chtml>\u003Chead>\u003Cstyle>    .parent {      background-color: #73AD21;      border: solid 3px blue;      display: flex;      align-items: center;      justify-content: center;      height: 500px;    }    .box1 {      width: 200px;      height: 100px;      background-color: white;      position: relative;    }    .box2 {      width: 200px;      height: 100px;      background-color: yellow;      position: relative;    }    .box3 {      width: 200px;      height: 100px;      background-color: red;      position: relative;    }\u003C\u002Fstyle>\u003C\u002Fhead>\u003Cbody>\u003Cdiv class=\"parent\">\u003Cdiv class=\"box1\">\u003C\u002Fdiv>\u003Cdiv class=\"box2\">\u003C\u002Fdiv>\u003Cdiv class=\"box3\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fbody>\u003C\u002Fhtml>\n",[748,954,952],{"__ignoreMap":814},[682,956,957],{},[714,958,821],{"href":959,"rel":960},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=6e784f8759",[718],[682,962,963],{},"Here is the outcome:",[682,965,966],{},[828,967],{"alt":968,"src":969},"The result of some HTML that shows white, yellow, and red rectangles on a green background with a blue border","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-004.png",[682,971,972],{},"Observe that nothing changes. This is because the position property relative does nothing to the elements. You can effect change by adding any coordinating properties: left, right, top and bottom.",[682,974,975,976,979],{},"Next, let's move the element (",[748,977,978],{},"box1",") to the left and bottom:",[806,981,984],{"className":982,"code":983,"language":811},[809]," .box1 {\n      width: 200px;\n      height: 100px;\n      background-color: white;\n      position: relative;\n      right: 250px;\n      top: 90px;\n    }\n",[748,985,983],{"__ignoreMap":814},[682,987,988],{},[714,989,821],{"href":990,"rel":991},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=295345984b",[718],[682,993,994],{},"Let's look at the result to better understand how to set the value of the properties:",[682,996,997],{},[828,998],{"alt":999,"src":1000},"CSS Positioning. The result of some HTML that shows white, yellow, and red rectangles on a green background with a blue border. The white rectangle is in the lower left corner","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-005.png",[682,1002,1003],{},"Notice that to move the element to the left, you need to set the value to the right; to move it to the bottom, you set it to the top. Also, it is as if the element kept its position on the screen.",[682,1005,1006,1007,1010],{},"Now, let’s move the element (",[748,1008,1009],{},"box2",") to the right and top:",[806,1012,1015],{"className":1013,"code":1014,"language":811},[809],".box2 {\n      width: 200px;\n      height: 100px;\n      background-color: yellow;\n      position: relative;\n      left: 100px;\n      bottom: 70px;\n    }\n",[748,1016,1014],{"__ignoreMap":814},[682,1018,1019],{},[714,1020,821],{"href":1021,"rel":1022},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=21cb459ba7",[718],[682,1024,939],{},[682,1026,1027],{},[828,1028],{"alt":1029,"src":1030},"The result of some HTML that shows white, yellow, and red rectangles on a green background with a blue border. The white rectangle is in the lower left corner, and the yellow and red rectangles now overlap.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-006.png",[682,1032,1033],{},"Remember that the value was set to left to enable the element to move right; to move it to the top, you set it to the bottom. In addition, the movement of the element did not push down or influence the other elements on the screen.",[774,1035,1037],{"id":1036},"absolute-position","Absolute Position",[682,1039,1040,1045,1046,751,1048,751,1050,1052,1053,1055],{},[714,1041,1044],{"href":1042,"rel":1043},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fposition#:~:text=An%20absolutely%20positioned%20element%20is,which%20the%20element%20is%20positioned.",[718],"Absolute position",") is an element with its position relative to its parent element. In this case, you remove the element from the normal document flow and do not create any gap for it in the page layout. Instead, the ",[748,1047,750],{},[748,1049,757],{},[748,1051,761],{}," and ",[748,1054,754],{}," values determine the element's final position.",[682,1057,1058],{},"Note that an absolute positioned element uses the document body and moves along with page scrolling. In addition, if it has no positioned ancestors, it can overlap.",[682,1060,1061],{},"For better understanding, we’ll work with these elements to explain how absolute positioning works:",[806,1063,1066],{"className":1064,"code":1065,"language":811},[809],"\u003C!DOCTYPE html>\u003Chtml>\u003Chead>\u003Cstyle>  body{    background-color: #73AD21;  }    .container {      background-color: red;      border: solid 3px blue;      display: flex;      align-items: center;      justify-content: center;      width: 500px;      height: 400px;      position: relative;    }    .box1 {      width: 200px;      height: 100px;      background-color: white;    }    .box2 {      width: 200px;      height: 100px;      background-color: yellow;    }\u003C\u002Fstyle>\u003C\u002Fhead>\u003Cbody>\u003Cdiv class=\"container\">\u003Cdiv class=\"box1\">\u003C\u002Fdiv>\u003Cdiv class=\"box2\">\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fbody>\u003C\u002Fhtml>\n",[748,1067,1065],{"__ignoreMap":814},[682,1069,1070],{},[714,1071,821],{"href":1072,"rel":1073},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=d98f48bcad",[718],[682,1075,963],{},[682,1077,1078],{},[828,1079],{"alt":1080,"src":1081},"The result of some HTML that shows a white and yellow rectangle in a red rectangle with a royal blue stroke, over top of a green background with a lighter blue stroke","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-007.png",[682,1083,1084],{},"Now, we’ll move the box. As mentioned earlier, that absolute position is an element with its position relative to its parent element.",[682,1086,1087,1088,1090],{},"Let’s move ",[748,1089,978],{}," to the left 50px from the parent element and down 40px from the parent element:",[806,1092,1095],{"className":1093,"code":1094,"language":811},[809]," .box1 {\n      width: 200px;\n      height: 100px;\n      background-color: white;\n      position: absolute;\n      left: 50px;\n      top: 40px;\n    }\n",[748,1096,1094],{"__ignoreMap":814},[682,1098,1099],{},[714,1100,821],{"href":1101,"rel":1102},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=bd784dab70",[718],[682,1104,939],{},[682,1106,1107],{},[828,1108],{"alt":1109,"src":1110},"The result of some HTML that shows staggered white and yellow rectangles in a red rectangle with a royal blue stroke, over top of a green background with a lighter blue stroke","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-008.png",[682,1112,1113],{},"Notice that the element was taken out of the document's normal flow, unlike the relative positioning, which leaves a space for a ghost element.",[682,1115,1116,1117,1119],{},"Next, let’s move the ",[748,1118,978],{}," element to the left of 50px and the top margin of 0 relative to its parent element:",[806,1121,1124],{"className":1122,"code":1123,"language":811},[809],".box1 {\n      width: 200px;\n      height: 100px;\n      background-color: white;\n      position: absolute;\n      left: 50px;\n      top: 0;\n    }\n",[748,1125,1123],{"__ignoreMap":814},[682,1127,1128],{},[714,1129,821],{"href":1130,"rel":1131},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=50ee41a237",[718],[682,1133,963],{},[682,1135,1136],{},[828,1137],{"alt":1109,"src":1138},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-009.png",[682,1140,1141,1142,1144],{},"The above image shows how ",[748,1143,978],{}," is positioned relative to its parent element.",[682,1146,1147,1148,1150],{},"Now, let’s move the ",[748,1149,1009],{}," element to the right 50px from the parent element, and down 40px from the parent element:",[806,1152,1155],{"className":1153,"code":1154,"language":811},[809],".box2 {\n      width: 200px;\n      height: 100px;\n      background-color: yellow;\n      position: absolute;\n      right: 50px;\n      bottom: 40px;\n    }\n",[748,1156,1154],{"__ignoreMap":814},[682,1158,1159],{},[714,1160,821],{"href":1161,"rel":1162},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=3905459324",[718],[682,1164,1165],{},"Here is the effect of the code:",[682,1167,1168],{},[828,1169],{"alt":1170,"src":1171},"The result of some HTML that shows staggered white and yellow rectangles at the bottom right corner of a red rectangle with a royal blue stroke, over top of a green background with a lighter blue stroke","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-010.png",[682,1173,1174,1175,1177],{},"Notice that the element affects the flow on the page. Also, the coordinating properties work as rendered, unlike relative positioning, where you have to set ",[748,1176,754],{}," to move left.",[682,1179,1116,1180,1182],{},[748,1181,1009],{}," element to the right 50px and to the bottom margin of 0 relative to its parent element:",[806,1184,1187],{"className":1185,"code":1186,"language":811},[809],".box2 {\n      width: 200px;\n      height: 100px;\n      background-color: yellow;\n      position: absolute;\n      right: 50px;\n      bottom: 0;\n    }\n",[748,1188,1186],{"__ignoreMap":814},[682,1190,1191],{},[714,1192,821],{"href":1193,"rel":1194},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=8297449705",[718],[682,1196,939],{},[682,1198,1199],{},[828,1200],{"alt":1170,"src":1201},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-011.png",[682,1203,1204,1205,1207],{},"This shows that ",[748,1206,1009],{}," element is positioned relative to its parent element, which has a bottom margin of 0.",[774,1209,1211],{"id":1210},"fixed-position","Fixed Position",[682,1213,1214,1215,1220,1221,751,1223,751,1225,758,1227,1229],{},"An element with ",[714,1216,1219],{"href":1217,"rel":1218},"https:\u002F\u002Fwww.w3.org\u002Fwiki\u002FCSS_absolute_and_fixed_positioning?source=post_page#:~:text=Fixed%20positioning%20is%20really%20just,position%20inside%20the%20browser%20window.",[718],"a fixed position"," is similar to an absolute element. This position is relative to the viewport, showing that it always remains in the same position even when you scroll through the page. When you see a fixed element on a page, it does not leave a gap. For example, the properties ",[748,1222,757],{},[748,1224,754],{},[748,1226,750],{},[748,1228,761],{}," work as position elements. Note that fixed elements are not affected by scrolling; instead, they are in the same position on the screen.",[682,1231,1232],{},"We’ll use this image to explain the fixed position, white element and yellow element before we scroll down:",[682,1234,1235],{},[828,1236],{"alt":1237,"src":1238},"The result of some HTML that shows staggered white and yellow rectangles at the bottom right corner of a red rectangle with a royal blue stroke and black filler text inside, over top of a green background with a lighter blue stroke","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-012.png",[682,1240,1241,1242,1244,1245,1247],{},"Now, let’s use two box elements to explain the fixed position. To do this, we’ll set the ",[748,1243,978],{}," (white) element as the absolute position and the ",[748,1246,1009],{}," (yellow) element as the fixed position:",[806,1249,1252],{"className":1250,"code":1251,"language":811},[809],"\u003Cstyle>  body{    background-color: #73AD21;  }    .container {      background-color: red;      border: solid 3px blue;      display: flex;      overflow: scroll;      align-items: center;      justify-content: center;      width: 500px;      height: 400px;      position: relative;    }    .box1 {      width: 100px;      height: 100px;      background-color: white;      position: absolute;      left: 50px;    }    .box2 {      width: 100px;      height: 100px;      background-color: yellow;      position: fixed;  }\u003C\u002Fstyle>\n",[748,1253,1251],{"__ignoreMap":814},[682,1255,1256],{},[714,1257,821],{"href":1258,"rel":1259},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=464a4f8dc0",[718],[682,1261,939],{},[682,1263,1264],{},[828,1265],{"alt":1237,"src":1266},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-013.png",[682,1268,1269,1270,1272],{},"Notice that the ",[748,1271,1009],{}," (yellow) element was not affected by the scrolling, rather, it remains fixed in the same position on the screen.",[774,1274,1276],{"id":1275},"sticky-position","Sticky Position",[682,1278,1279,1284],{},[714,1280,1283],{"href":1281,"rel":1282},"https:\u002F\u002Fblog.hubspot.com\u002Fwebsite\u002Fcss-position-sticky",[718],"A sticky position"," occurs when an element is positioned based on the user's scroll position. The sticky position combines the relative and fixed positions, depending on the part of the scroll. In this way, it acts like a relatively positioned element. In addition, it maintains a relative position until a given offset position is met in the viewport, and then it \"sticks\" in place like a fixed position.",[682,1286,1287],{},"Let’s look at this example for a better understanding of how the sticky position works:",[682,1289,1290],{},[714,1291,821],{"href":1292,"rel":1293},"https:\u002F\u002Fuser-96a93fbe-468f-4504-b52f-78e91ab5ec81-agyqaaz4hq-uc.a.run.app\u002F?p=af3c48b4dc",[718],[682,1295,1296],{},"Below are the results of the element before and after we scroll.",[682,1298,1299],{},"The image before the scrolling:",[682,1301,1302],{},[828,1303],{"alt":1304,"src":1305},"grayed out text with a white highlighted bit of text in the bottom left corner ","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-014.png",[682,1307,1308],{},"The image after scrolling:",[682,1310,1311],{},[828,1312],{"alt":1313,"src":1314},"grayed out text with a white highlighted bit of text in the top left corner ","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fimg-015.png",[682,1316,1317,1318,1321],{},"Notice that the white element maintained a relative position until it met the specified top scroll position of ",[748,1319,1320],{},"top:0",". Then, it acts as a fixed position element and sticks to the specified spot.",[686,1323,1325],{"id":1324},"conclusion","Conclusion",[682,1327,1328,1329,1334,1335,1340],{},"The CSS positioning properties give structure to your designs and make reviewing the content on a web page more accessible. So, be intentional with CSS positioning, and the results will blow your mind! However, mastering CSS takes regular practice. Keep honing your skills, and you’ll get better at it in time. Learn more about CSS positioning properties such as ",[714,1330,1333],{"href":1331,"rel":1332},"https:\u002F\u002Fcode.pieces.app\u002Fblog\u002Ffundamentals-of-the-css-float-and-clear-properties",[718],"CSS float and clear",", or ",[714,1336,1339],{"href":1337,"rel":1338},"https:\u002F\u002Fcode.pieces.app\u002Fblog\u002Fstyling-text-in-css",[718],"how to style text in CSS"," on your site.",{"title":814,"searchDepth":1342,"depth":1342,"links":1343},2,[1344,1345,1346,1347,1355],{"id":688,"depth":1342,"text":689},{"id":695,"depth":1342,"text":696},{"id":731,"depth":1342,"text":732},{"id":768,"depth":1342,"text":769,"children":1348},[1349,1351,1352,1353,1354],{"id":776,"depth":1350,"text":777},3,{"id":868,"depth":1350,"text":869},{"id":1036,"depth":1350,"text":1037},{"id":1210,"depth":1350,"text":1211},{"id":1275,"depth":1350,"text":1276},{"id":1324,"depth":1342,"text":1325},"Software Development","2023-01-11T00:00:00.000Z","In this article, you’ll learn what CSS positioning properties are, the different CSS positioning property values, and how you can apply them to your web page.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fapplying-css-positioning-properties\u002Fhero.jpeg","decorative cover image showing a glass ball positioned on a grate",{},"\u002Fblog\u002Fapplying-css-positioning-properties",{"title":673,"description":1358},"blog\u002Fapplying-css-positioning-properties",[1368],"css","s2SpuPVg_9V3zcrpWKLWItGu9voAoqIaHhBT9Pa9hYI",{"id":1371,"title":674,"body":1372,"description":814,"draft":1359,"extension":1360,"meta":1376,"navigation":32,"path":1377,"photo":1378,"photoAlt":676,"seo":1379,"stem":1380,"__hash__":1381},"authors\u002Fauthors\u002Feze-thankgod.md",{"type":679,"value":1373,"toc":1374},[],{"title":814,"searchDepth":1342,"depth":1342,"links":1375},[],{},"\u002Fauthors\u002Feze-thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Feze-thankgod.png",{"title":674,"description":814},"authors\u002Feze-thankgod","o14STAeaSHqhhO-_UWTdLv092reFi3aji2mT8I6tJjw",{"left":1383,"top":1383,"width":1384,"height":1384,"rotate":1383,"vFlip":1359,"hFlip":1359,"body":1385},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]